已知兒童寬度的CSS兩列

Question

我創建了一些用於顯示具有不同高度的框的代碼（高度將來自圖像內部）。

在這個例子中完美的作品：http://jsfiddle.net/GSnfG/

...但是當我編輯一些高度（在未來的 - 像高），here: box 3 set to height 100px，結果不起作用好。

如何準備創建類似兩列的CSS代碼？

我不能使用表，我也不想使用jquery或其他js 這可能嗎？

Answer 1

不，這不可能在一般情況下沒有JavaScript或服務器端語言來處理這個問題。

在某些情況下，你可以添加包裝div S代表每個單獨的列，但元件尺寸的某些組合將讓這個看起來很糟糕，例如：http://jsfiddle.net/suaaK/3/ - 在演示中，它可能會更好，如果盒6下方框3.您擁有的元素越多（也越不同大小），列可能變得越不均勻。

看到這個答案的候選技術進行比較，顯示出他們不工作，並且也顯示出解決方案涉及服務器端代碼的客戶端部分：

• CSS Floating Divs At Variable Heights

如果您願意使用JavaScript + jQuery，則應該使用jQuery Masonry。

還有一個原料JavaScript版本：Vanilla Masonry

演示：

• http://desandro.com/demo/masonry/docs/filtering.html
• http://desandro.com/demo/masonry/docs/animating-jquery.html
• http://desandro.com/demo/masonry/docs/appending.html

Answer 2

我已經提供了一個例子，通過jFiddle一個可能的解決方案

首先創建兩列一個用於左箱和一個用於右框。見下文。

如果您擔心您的box-container寬度，只需將.box-container {width:105px}添加到您的css。

<div class="container"> 
     <div class="left box-container"> 
      <div class="box" style="height:60px;">1</div> 

      <div class="box" style="height:100px;">2</div> 

      <div class="box" style="height:60px;">3</div> 

     </div><!-- left-box-container --> 

     <div class="right box-container"> 
      <div class="box" style="height:30px;">1</div> 

      <div class="box" style="height:200px;">2</div> 

      <div class="box" style="height:60px;">3</div> 

     </div><!-- right-box-container --> 

    </div> 

Answer 3

如果你想擁有的列結束了相同的高度，這是說，墊的是較小然後他們的鄰居的div你可以在CSS改變這樣的事情：

.box {background:#20abff; color:#fff; width: 5px; margin: 5px;} 
.left {float:left;} 
.right {float:left;} 
.container {width:200px;} 

你可以做的另一件事是用div製作僞表。

.Table_Wrapper { width: 400px; } 
.Table_Row { width: 98%; padding: 1%;float: left; } 


<div class="Table_Wrapper"> 
    <div class="Table_Row"> 
     <div class="box left" style="height:60px;">1</div> 
     <div class="box right" style="height:80px;">2</div> 
    </div> 
    <div class="Table_Row"> 
     <div class="box left" style="height:60px;">3</div> 
     <div class="box right" style="height:60px;">4</div> 
    </div> 
    <div class="Table_Row"> 
     <div class="box left" style="height:60px;">5</div> 
     <div class="box right" style="height:60px;">6</div> 
    </div> 
</div> 

JSFiddle