html - 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>