CSS我如何在框中

-1

蓋伊填補這一空白，對不起，我吸，這CSS我如何在框中

我怎樣才能讓這一切我的箱子避免盒子1中所做的間距，使得箱4自動頂部調整

.grp { 
width: 140px; 
margin: 0px auto; 
} 

.box { 
background: red; 
margin: 3px; 
float: left; 
width: 50px; 
height: 50px 
}

來源

2013-09-30 Styli

這類問題與佈局與CSS常見。您需要重新考慮這一點，並且在您的解決方案中無法使用Javascript或jQuery。有一個流行的JavaScript庫來重新安排容器，但即使這個圖書館沒有從我可以告訴的高度如何調整你想要的方式的例子：http://isotope.metafizzy.co – BumbleB2na

問題是我可以'噸重新考慮在這個因爲我拿出數據庫的價值和複雜的輸出，我不能編輯每個值每次這個問題顯示..我想我要去用這個jQuery – Styli

你可以改變你的規則.box4到：

.box4 { 
    background: red; 
    float: left; 
    margin: 3px; 
    width: 50px; 
    height: 50px; 
    position:relative; 
    top:-25px; 
}

jsFiddle example

發生這種情況是因爲應用於浮動元素的規則。具體而言，「浮動框的外部頂部可能不會高於源文檔中早期元素生成的任何塊或浮動框的外部頂部」。但是通過使用定位，您可以將盒子放在任何需要的地方。

來源

2013-09-30 16:59:20 j08691

它聽起來像OP不想要固定在這個盒子上的高度。如果情況並非如此，這似乎很好。 – Gray

@格雷 - 我沒有增加一個高度。只是位置和頂級屬性。 – j08691

不，我不能這樣做，那麼我必須應用這個位置：相對於我所有的盒子，它們都是相同的，但對於我這樣做的演示\ – Styli

<div class="grp"> 
    <div style="float:left;width:40%"> 
     <div class="box" style="height: 80px">box 1</div> 
     <div class="box">box 4</div> 
    </div> 
    <div style="float:left;width:40%"> 
     <div class="box">box 2</div> 
     <div class="box">box 3</div> 
     <div class="box">box 5</div> 
    </div> 
</div>

約書亞·約翰遜後砌體設計：http://designshack.net/articles/css/masonry/

來源

2013-09-30 17:07:07 Watchout

不，我更新了小提琴現在看看 – Styli

我更新了它也根據您的更改:) – Watchout

你沒有得到它..框是從數據庫輸出的值..所以每次值不同，並改變，所以框的大小也改變，然後我我是否每次都這樣做：P – Styli

CSS我如何在框中

回答

相關問題