css - 在容器 div 中浮动 div

Question

我想浮动“三”，以便在调整浏览器窗口大小时出现在“二”下方。目前“三”出现在“一”之下

<style type="text/css">
#container  {width:700px;}
.col        { float: left; margin: 0px 16px 0px 0px; padding: 0px; height: auto;}
.two        { width: 192px; background-color:ccc; }
.four       { width: 400px; background-color:ccc; }
</style>



<div id="container" >
    <div class="col two" style="background-color:green;" >
    one
    </div>

    <div  class="col">

        <div class="col four" style="background-color:blue;" >
        two
        </div>
        <div class="col two" style="background-color:red;"> 
        three
        </div>

    </div>
</div>

Answer 1

您可以通过对父容器应用 margin-left 来做到这一点。'col' 包裹着两个和三个

更新：确保边距至少是第一列的宽度，否则它仍然不起作用