如何將浮動的div用較短的div浮動一個在anoter下面

我有一個動態生成的div的列表，表示用於選擇各種選項的面板。有兩種類型的div，普通的和短的。常規div的高度用javascript設置爲最高的高度。此外，如果te short div的高度小於最大值的一半，則將其設置爲該高度的一半，否則將其設置爲全高。如何將浮動的div用較短的div浮動一個在anoter下面

我想現在要做的事（最好用CSS）是以這樣的方式列出這些項目，如果有足夠的空間，將一個短div放在另一個排序div下面。

這裏有一些說明，希望能夠讓事情更清晰：

來源

2011-04-28 alh84001

我非常好奇，想看看這個問題的答案 - 我有很多的麻煩與HTML/CSS還垂直一切。也會爲你研究它。 – Marty 2011-04-28 07:41:32

沒有通用純CSS的解決方案。

見我的前面的回答爲候選技術進行了比較：

CSS Floating Divs At Variable Heights

除非你可以使用服務器端代碼來手動計算像素，並使用position: relative/position: absolute; top: ?px; left: ?px，你將不得不求助於JavaScript來處理定位。

這個jQuery插件通常是一個很好的解決方案：jQuery Masonry

還有一個原始的JavaScript版本：Vanilla Masonry

一些可能相關演示：

來源

2011-04-28 10:57:08 thirtydot

最後我寫了一個小的jquery函數來完成這個技巧，但是請指出砌體插件。它看起來很有趣，當需要類似的東西時，我會牢記它 – alh84001 2011-04-29 14:36:46

據我所看到的，這是不可能的純粹與CSS：如果您提供的小框用clear: left，他們會出現在以下全部其他。如果你不這樣做，它們將會彼此相鄰。

我能想到的最簡單的解決方法是將兩個小方塊手動分組到一個單獨的div中。這裏有一個工作示例：

<html> 
<head> 
    <style type="text/css"> 
     div.large, div.small { width: 40px; margin: 5px; } 
     div.large { height: 95px; background-color: blue; } 
     div.small { height: 45px; background-color: red; } 
     div.large, div.smallblock { float: left; } 
    </style> 
</head> 
<body> 
    <div class="large">1</div> 
    <div class="large">2</div> 
    <div class="smallblock"> 
     <div class="small">3</div> 
     <div class="small">4</div> 
    </div> 
    <div class="smallblock"> 
     <div class="small">5</div> 
     <div class="small">6</div> 
    </div> 
    <div class="large">7</div> 
</body> 
</html>

來源

2011-04-28 07:44:46 Heinzi

如何將浮動的div用較短的div浮動一個在anoter下面

回答

相關問題