CSS将div正确定位到两列

Question

如果一个帖子包含很多文本，我在定位div时遇到问题。 div显然会占据更大的空间。这是link of my code

HTML

<div class="container">
   <div>DIV 1 Sample text</div>
   <div> DIV 2 Sample text Sample text Sample text</div>
   <div> DIV 3 Sample text Sample text Sample text</div>
   <div> DIV 4</div>    
</div>

CSS：

.container {
    width:400px;
}

.container div {
    float:left;
    width:180px;
    background:red;
    margin:2px;
}

Answer 1

将一个div中的两个左div和另一个div中的两个右div包裹起来

    <div class="container">
    <div class="left">
   <div>DIV 1 Sample text</div>
   <div> DIV 2 Sample text Sample text Sample 
     text</div>
    </div>
    <div class="right">
    <div> DIV 3 Sample text Sample text Sample 
    text</div><div> DIV 4</div> </div>   
    </div>

Answer 2

<div class="container">
    <div class="left">
   <div>DIV 1 Sample text</div>
   <div> DIV 3 Sample text Sample text Sample text</div>
    </div>
    <div class="left">
    <div> DIV 2 Sample text Sample text Sample text</div>
    <div> DIV 4</div> </div>   
    </div>

和css应该是

.container {

  width:400px;

}

.container .left {
  float:left;
  width:180px;
  background:red;
  margin:2px;
}

Answer 3

这是一种砌筑方式。

使用salvattore（未测试）

<div id="grid" data-columns>
    <div>Item #1</div>
    <div>Item #2</div>
    <div>Item #3</div>
    <div>Item #4</div>
</div>

CSS

#grid[data-columns]::before {
    content: '2 .column.size-1of2';
}

.column { float: left; }
.size-1of2 { width: 50%; }

参考http://salvattore.com/实现砌体