2列浮動浪費空間

我有一個容器div，其中我想打包可變數量的div s未知（可變）高度，但與給定的min-width。我的要求是：2列浮動浪費空間

如果容器寬度足以容納兩列，我希望他們很好地分佈在兩列，沒有不必要的空白。
不是，他們應該只是超越對方。

目前，我已經給了div小號width:48% margin-right:2%;float:left;這很好地工作在一列狀態，但是當我調整瀏覽器窗口，騰出兩列，每div這在左列堅持結束與過去的div的哪去了右邊的底部水平結盟：

what I have http://img602.imageshack.us/img602/5719/whatihave.png

這是我想他們去（無浪費空間）：

what I want http://img96.imageshack.us/img96/6985/whatiwantu.png

如果可能，我想純CSS解決方案。

謝謝！ /古斯塔夫

編輯：此標記說明我的問題：

<html> 
<head> 
<style type="text/css"> 
.box { 
    width: 48%; 
    min-width:550px; 
    margin-right:2%; 
    margin-bottom: 1.5em; 
    background:blue; 
    color:white; 
    height:180px; 
    float:left; 
} 

.tall { 
    height: 250px; 
} 

</style> 
</head> 
<body> 
<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 
<div class="box tall">4</div> 
<div class="box">5</div> 
<div class="box">6</div> 
<div style="clear:both"/> 
</body> 
</html>

的.box ES是動態生成的，所以是他們的高度，我只是把在一個較高的說明。

來源

2010-12-17 Gustav Barkefors

如果你想要一個純粹的CSS解決方案，也許你應該發佈你的標記和CSS而不是屏幕快照。 – Robusto 2010-12-17 16:05:32

我能想到的唯一的東西就是.odd-box {float：left;} .even-box {float：right;}但問題在於如果容器比.box div更寬，佈局。有點希望這可能引發一些想法。 – 2010-12-17 16:39:55

我不認爲用純CSS可以達到預期的效果。我用jQuery Masonry來複制你以後的效果，而且效果非常好。

我很想看到一個純粹的CSS解決方案，但還沒有看到任何接近。

來源

2010-12-21 00:11:44 Simon

從某種意義上說，這是我所希望的那種答案。（當然，也很害怕）。頁面上的第三句明確指出：「浮動水平然後垂直排列元素」。看起來很棒雖然，非常感謝！ – 2010-12-22 10:42:30

我相信，如果你有一個div的每一列你把編號的div你會得到你想要的。類似這樣的：

<div class="containerDiv"> 
    <div class="column"> 
     <div class="content"> 
      1 
     </div> 
     <div class="content"> 
      4 
     </div> 
    </div> 
    <div class="column"> 
     <div class="content"> 
      2 
     </div> 
     <div class="content"> 
      3 
     </div> 
    </div> 
</div>

下一步似乎是「我該如何平衡我的列」。某處的某些代碼正在生成您提到的框。它決定每個盒子的高度。在將請求轉發到JSP進行演示之前，此代碼需要爲每列生成一個平衡列表。通過平衡，我的意思是「第1列的高度與第2列的高度相似」

來源

2010-12-17 16:07:35 DwB

我發現這種方法很困難，因爲我不知道每個'.content'會有多高，因此無法知道將哪個'column'附加到它。或者說，「下一個」一個......此外（假設「列」被浮動），當「摺疊」到一列時，排序會很奇怪。 – 2010-12-17 16:13:29

2列浮動浪費空間

回答

相關問題