Html 父div与子div的宽度不同

如果我的父级

没有指定宽度，而子级

指定了固定宽度，并且窗口小于固定宽度CSS/HTML中的哪些规则导致父级

仅为窗口的宽度，而不是子级的固定宽度？

使用以下代码段，父对象的背景颜色为红色。。。孩子比它住的窗户大得多

如果运行代码段并向右滚动窗口，您将看到父对象的红色背景仅与窗口本身一样宽，尽管子对象要大得多

#父级{
背景色：红色；
}
#孩子{
宽度：1000px；
}

---

Hello world Hello world Hello world Hello world Hello world Hello world Hello world

默认情况下

div

元素具有

display:block

，因此它们的宽度等于其父元素的宽度，或者在本例中为

body

或

html

但如果将

#parent

元素上的

display

设置为

inline block

，则该元素的宽度将与其内容的宽度相同，或者在本例中，其

#child

元素的宽度相同

#父级{
背景色：红色；
显示：内联块；
}
#孩子{
宽度：1000px；
}

---

Hello world Hello world Hello world Hello world Hello world Hello world Hello world

这可能是您正在寻找的解决方案：

#parent{
    background-color : red;
    display : inline-block;
}
#child {
   width:1000px;
}

或使用浮点数：

#parent{
    background-color : red;
    float: left;
    clear: both;
}
#child {
   width:1000px;
}

---

不要将浮动与显示混用。简单的浮点将删除显示行为，因此在您的示例中，您可以仅使用内联块或仅使用浮点，但两者同时使用是不正确的。看起来，

内联块

是前进的方向-感谢您的回答感谢Nenad。。。这很有效。[编辑，谢谢您的编辑，现在我明白了]