的CSS顯示連貫的div，嵌段

Question

我想有顯示這樣的各種高度的塊：

與代碼

<div id="content"> 
    <div class="test" > 1<br/>1<br/>1 </div> 
    <div class="test" > 2 </div> 
    <div class="test" > 3<br/>3<br/>3<br/>3 </div> 
    <div class="test" > 4 </div> 
    <div class="test" > 5 </div> 
    <div class="test" > 6<br/>6 </div> 
    <div class="test" > 7 </div> 
    <div class="test" > 8 </div> 
</div> 

唯一結果我已經是這一個：

while doing

float: left; 

任何線索我如何能夠實現這一點，而不使用html中的兩列？

我有一個小提琴：

Answer 1

我把兩列獨立浮動的DIV：

<div id="content1" class="content"> 
    <div class="test" id ="1">1<br/>1<br/>1</div> 
    <div class="test" id ="4">4</div> 
    <div class="test" id ="5">5</div> 
    <div class="test" id ="6">6<br/>6</div> 
</div> 
<div id="content2" class="content"> 
    <div class="test" id ="2">2</div> 
    <div class="test" id ="3">3<br/>3<br/>3<br/>3</div> 
    <div class="test" id ="7">7</div> 
    <div class="test" id ="8">8</div> 
</div> 

.content{ 
    width:100px; 
    float:left; 
} 

.test { 
    margin: 5px; 
    width: 90px; 
    background-color: #666; 

} 

http://jsfiddle.net/5bSwH/

Answer 2

試試這個：http://jsfiddle.net/agA8Q/9/

這意味着調整你的html有點：

<div id="content"> 
<div class="col"> 
    <div class="test" id ="2">2</div> 
    <div class="test" id ="3">3<br/>3<br/>3<br/>3</div> 
    <div class="test" id ="7">7</div> 
    <div class="test" id ="8">8</div> 
</div> 
<div class="col"> 
    <div class="test" id ="1">1<br/>1<br/>1</div> 
    <div class="test" id ="4">4</div> 
    <div class="test" id ="5">5</div> 
    <div class="test" id ="6">6<br/>6</div> 
</div> 
</div> 

Answer 3

你可以使用這種方法。

http://jsfiddle.net/FTDse/

<div id="content_left"> 
    <div class="test" id="1">1 
     <br/>1 
     <br/>1</div> 
    <div class="test" id="2">2</div> 
    <div class="test" id="4">4</div> 
    <div class="test" id="5">5</div> 
    <div class="test" id="6">6 
     <br/>6</div> 
</div> 
<div id="content_right"> 
    <div class="test" id="2">2</div> 
    <div class="test" id="3">3 
     <br/>3 
     <br/>3 
     <br/>3</div> 
    <div class="test" id="7">7</div> 
    <div class="test" id="8">8</div> 
</div> 

#content_left { 
    float:left; 
    width: 100px; 
} 
#content_right { 
    float:left; 
    width: 100px; 
} 
.test { 
    margin: 5px; 
    width: 90px; 
    background-color: #666; 
}