在容器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'包裹了两个和三个

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