Question

http://jsfiddle.net/w2P7s/

<div id="a">aaa</div>
<div id="b">
    <div id="col1">col1</div>
    <div id="col2">col2</div>
</div>
#a
{
    float: left;
    width: 30%;
    background-color: red;
}

#b
{
    background-color: green;
}

#col1
{
    float: left;
    width: 50%;
    background-color: blue;
}

#col2
{
    float: left;
    width: 50%;
    background-color: yellow;
}

col1和col2必须在“b”内，但看起来溢出

Answer 1

如果您有浮动<div>，则可以为其邻居设置overflow:hidden。它将浮动在div旁边并占用剩余的可用宽度。如果你这样做两次（一个在另一个里面），你会得到我认为你正在寻找的结果：

给#b样式overflow:hidden：

#a
{
    float: left;
    width: 30%;
    background-color: red;
}

#b
{
    overflow:hidden;
    background-color: green;
}

#col1
{
    float: left;
    width: 50%;
    background-color: blue;
}

#col2
{
    overflow:hidden;
    background-color: yellow;
}

JSFiddle

Answer 2

看起来这是一个浮动问题，而不是宽度问题。由于你把所有东西都浮动了，所以它们都被从流中移除并彼此相邻堆叠，即使＃col1和＃col2有不同的包装器。

尝试将clear:left;添加到#b。这将强制它出现在任何先前浮动到左侧的元素下方。

http://jsfiddle.net/nathanlong/byRDq/

clear属性的说明：https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Answer 3

我们可以做2种方式

从#a

中删除float: left;

OR

在#b

中使用clear:both;

我想你正在寻找这个???

Answer 4

解决方案：

#a
{

    width: 30%;
    background-color: red;
}

#b
{
    background-color: green;
}

#col1
{
    float: left;
    width: 50%;
    background-color: blue;
}

#col2
{
    float: right;
    width: 50%;
    background-color: yellow;
}

<强>问候
阿里穆罕默德

宽度不在div内部

4 个答案: