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

时间:2014-07-28 20:31:53

标签: html css css-position

我在容器内有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>

我还尝试使用clearfixoverflow,但无法使其正常运作。

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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

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

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