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>

Answer 2

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

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

或使用float：

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

initialValue

父div与子div的宽度不同

2 个答案: