不同高度的div浮在兩列

我有兩列，想要按照外觀順序堆疊不同高度的div。不同高度的div浮在兩列

divs是動態創建的。

如果我只將它們浮在寬度的50％上，很快我會遇到這種情況，即div＃4比傳入的少數div高5倍。然後下一個div與上一個div的底部對齊。

我需要適合孩子的div容器是這樣的精確匹配：

----- ------- 
    1  2 
----- 
    3 ------- 
----- 4 
    5 
----- 
    6 
----- 
    7 ------- 
----- 8 
    9 

----- 
10 ------- 
     11 
     ------- 
     ------- 
-----

這裏是代碼片段我做了什麼：

<style> 
    .box {background:#20abff; color:#fff; width:50%; margin: 5px;} 
    .left {float:left;} 
    .right {float:right;} 
    .container {width:205px;} 
</style> 
    <body> 
     <div class="container"> 
      <div class="box left" style="height:60px;">1</div> 
      <div class="box left" style="height:80px;">2</div> 
      <div class="box left" style="height:30px;">3</div> 
      <div class="box left" style="height:70px;">4</div> 
      <div class="box left" style="height:60px;">5</div> 
      <div class="box left" style="height:20px;">6</div> 
      <div class="box left" style="height:40px;">7</div> 
      <div class="box left" style="height:90px;">8</div> 
      <div class="box left" style="height:30px;">9</div> 
     </div> 
    </body>

，它看起來類似於這樣

http://dl.dropbox.com/u/142343/divstack.html

欣賞幫助

來源

2012-07-10 dzona

你能發佈你目前的html和css嗎？ – Erica 2012-07-10 13:47:04

[你有什麼嘗試？]（http://mattgemmell.com/2008/12/08/what-have-you-tried/） – avall 2012-07-10 13:50:19

我明白你想要做什麼..雖然有什麼問題嗎？ – Oofpez 2012-07-10 13:51:13

你將不得不用JavaScript來做到這一點。如果您使用的是jQuery，則會有一個名爲Masonry的優秀插件。還有non jQuery version。

引述README on GitHub：

砌體是一個動態的網格佈局腳本。把它看作CSS浮動的倒裝端。而浮動水平排列元素，然後垂直排列元素，砌體垂直排列元素，將每個元素放置在網格中的下一個未打開位置。結果最大限度地減少了不同高度元素之間的垂直間隙，就像牆壁上鑲嵌石塊的泥瓦匠一樣。

single column layout可能是你要找的。

如果你不介意在塵土上留下舊的瀏覽器，還有CSS3 column properties。有一個例子here, on Quirksmode，以及MDN的一些文檔。

來源

2012-07-10 13:51:05 Bojangles

+1砌體插件是這種佈局的方式。 – 2012-07-10 13:58:26

但砌體不能在IE中工作...任何解決方案 – 2013-01-05 10:25:01

@Rama你甚至在IE中試過嗎？ [演示網站]（http://masonry.desandro.com/）在IE10,8和7中完美工作。 – Bojangles 2013-01-05 10:27:21

使用2 div作爲容器，把這兩個列在這個容器div，所以給這個div浮動左右....它可能工作... 此外網格佈局將工作。

來源

2012-07-10 15:04:44

不同高度的div浮在兩列

回答

相關問題