Question

我有一个容器div，其绝对位置的固定宽度为559px。我想让div1和div2具有相同的宽度，并确保每个div的内容不超出固定宽度。

这就是我现在所拥有的：

    <div id="top">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>


#top{
    position:absolute;
    top:0;
    width:559px;
    height:133px;
    background-color:black;
    overflow:hidden;
}

#div1
{


}
#div2
{


}

我错过了div1和div2的样式。我怎样才能做到这一点？

Answer 1

你可以简单地浮动两个div并给它们一半的宽度：

#div1, #div2 {
    width: 50%;
    float: left;
}

在这里小提琴：http://jsfiddle.net/nkxWP/1/

Answer 2

你没有给＃div1-2任何造型......只需添加

#div1, #div2
{
    width: 50%;
    overflow: hidden;
    float: left;
}

Answer 3

<强> DEMO

CSS

    #top{
    position:absolute;
    top:0;
    width:559px;
    height:133px;
    background-color:black;
    overflow:hidden;
}

#div1, #div2 {
    position: relative;
    width: 50%;
    float: left;
    color:white;
    background-color:yellow;
}
#div1 {
    background-color: blue;
}

Answer 4

试试这个

#div1
{
    width: 50%;
    overflow: hidden;
    float: left;

}
#div2
{
    width: 50%;
    overflow: hidden;
    float: left;

}

FIDDLE

如何在具有固定宽度的外部绝对定位div内对齐两个内部div，其中两个div具有相同的宽度？

4 个答案: