父div与子div的宽度不同

Question

如果我有一个<div>没有指定宽度的父级,并且指定<div>了固定宽度的子级,并且窗口小于固定宽度... CSS/HTML中的哪些规则导致父级<div>只是窗口的宽度而不是固定宽度的孩子？

使用以下代码段,父级的背景颜色为红色......并且孩子的大小比它所居住的窗口大.

如果你运行代码片段并向右滚动窗口,你会看到父窗口的红色背景只有窗口本身的宽度,尽管孩子要大得多吗？

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

<div id="parent"><div id="child">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div></div>

是否有一个简单的CSS命令,这意味着父级必须至少与子级相同,而无需专门设置大小 min-width:1000px

Answer 1

默认情况下,div元素display: block的宽度等于其父级的宽度,或者在这种情况下body或html.

但是,如果你设置display到inline-block在#parent现在,该元素将有宽度相同,其内容的宽度或最大的子元素在这种情况下,它的#child元素.

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

<div id="parent"><div id="child">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div></div>