Question

我在容器内有3个div。我希望第一个div占据100％宽度而另一个潜水占50％并且并排放在第一个div之下。但是，如果我给出50％的宽度并且浮动：向左移动到其他2个div，则第3个div将低于第2个div。我尝试了溢出和位置，但无法让它工作。

CSS：

 .contentC{
        /*width:100%;*/
        overflow:hidden;
    }
    #box1 {
        background:#f00;
        float:left;
        width:100%;

    }

    #box2 {
        background:#0f0;
        float:left;
        width:50%;
    }
    #box3 {
        background:#055;
        float:left;
        width:50%;

    }

HTML：

<body>
<div class ="contentC">
    <div id="box1">Hi,Div1</div>
    <div id="box2">Hi,Div2</div>
    <div id="box3">Hi,Div3</div>
</div>
</body>

我还尝试使用clearfix和overflow，但无法使其正常运作。

Answer 1

通过填充删除box2和box3中的所有边距和填充：0;保证金：0;

Answer 2

我不确定我是否理解上下文或其意外行为，但你所拥有的是正确的，在第一个div上没有左浮动。

这是一个小提琴：http://jsfiddle.net/8n4Qx/

#box1 {
    background:#f00;
    width:100%;
}

每个宽度50％并排定位2个div

2 个答案: