html - 如何在具有固定宽度且两个 div 具有相同宽度的外部绝对定位 div 内对齐两个内部 div？

Question

我有一个具有固定宽度 559px 的绝对位置的容器 div。我想让 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

演示

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;

} 

小提琴