css - 在容器 div 内 float div

Question

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

<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' 环绕二和三

更新:保证页边距至少是第一列的宽度，否则还是不行