與CSS的包裝箱

我正試圖解決CSS佈局的經典箱包裝/揹包問題。與CSS的包裝箱

我想以最小化元素之間空白的方式安排很多方塊，例如：

CSS3列很好地工作在這裏 - 箱子依次排列，但所有的白色空間被有效地消耗。有一個小問題 - 盒子被「剪切」，或跨越多列。不能這樣做。

我在經過一些盒子後使用了經典的div.clearer，但沒有任何效果 - 盒子仍然跨越了那些CSS3列。有一列跨度CSS屬性，但它不是在任何瀏覽器還不支持;（

或者，我可以定義列自己並安排手工盒，但實際上該箱變高度非常頻繁

。

最後一個問題：有沒有辦法在使用純CSS盒子之間的空白最小化的方式來安排箱子

感謝

盒子是否爲塊級元素？ –

是的，他們只是div的。我嘗試使用display：block和display：inline-block。 – xconspirisist

實際上，只需使用JavaScript：http://masonry.desandro.com/ – thirtydot

雖然我還沒有嘗試過自己呢，一個可能的答案可能是使用？！ jQuery Masonry plugin。這似乎符合你的要求

在純粹的CSS和HTML中做這件事將會非常困難，你將不得不放棄一些願望/要求......

2012-08-22 15:13:46 Jeroen

或使用砌體的「大哥」同位素，它可以做砌體佈局等等。這很容易實現。另一種選擇是jQuery Tiles圖庫，它也可以用於文本。 – Systembolaget

回答