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>

我唯一的结果就是这个：

做着

 float: left;

如何在不使用html中的两列的情况下实现这一目标的任何线索？

我有一个小提琴： http://jsfiddle.net/agA8Q/8/

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;
}