Question

我想将这两个div元素与float对齐：左右并排。如果我添加＆＃34;溢出：隐藏＆＃34;，而不是它不起作用。但我无法消除这种情况＆＃34;溢出＆＃34;属性。

有什么解决方案吗？

CSS：

#box{
    width:100%;
    overflow:hidden;
    clear:both;
}

#el1 {
    width:49%;
    background-color:yellow;
    height:100px;
    float:left;
}
#el2 {
    width:49%;
    background-color:blue;
    height:100px;
    float:left;
}

HTML：

<div id="box">
    <div id="el1"></div>
</div>

<div id="box">
    <div id="el2"></div>
</div>

FIDDLE

提前致谢。

Answer 1

工作解决方案：

http://jsfiddle.net/Ar99F/280/

的变化：我从你的内部元素中删除了浮动，因为这是真正导致你的问题，而不是溢出。此外，页面上的相同 ID不能包含两个元素！所以我制作了一个box1而另一个box2

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

#el1 {
    width: 100%;
    background-color: yellow;
    height: 100px;
}
#el2 {
    width: 100%;
    background-color: blue;
    height: 100px;    
}

Answer 2

我认为这个CSS正是你要找的。

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

#el1 {
    background-color:yellow;
    height:100px;
}
#el2 {
    background-color:blue;
    height:100px;
}

顺便说一句，你的HTML是错误的，id应该是唯一的，你有两个#box。

Div溢出并排排列

2 个答案: