Html 宽度不是直接在div内测量的

aaa
可乐
可乐
#a
{
浮动：左；
宽度：30%；
背景色：红色；
}
#b
{
背景颜色：绿色；
}
#可乐
{
浮动：左；
宽度：50%；
背景颜色：蓝色；
}
#可乐
{
浮动：左；
宽度：50%；
背景颜色：黄色；
}

---

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

如果您有一个浮动的

，您可以为它的邻居设置

溢出：隐藏的

。它将浮动在div旁边，占据剩余的可用宽度。如果你这样做两次（一次又一次），你会得到我认为你想要的结果：

给

#b

样式

溢出：隐藏

：

#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;
}

---

看起来这是一个浮动问题，而不是宽度问题。因为所有的东西都漂浮在左边，所以它们都从流中移除并彼此堆叠，即使#col1和#col2有不同的包装

尝试添加

清除：左至#b。这将强制它显示在浮动到左侧的任何先前元素的下方


clear属性的解释：
我们可以用两种方法来实现

移除
浮动：左侧来自#a

或

使用
clear：两者都有在#b中

我想你正在寻找这个解决方案：

#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;
}

问候

阿里·穆罕默德（Ali Muhammad）
你的小提琴响了，你能解释一下逻辑吗？-@奥盖兹
#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;
}