html - div 未包含在父 div 中的问题

Question

我的 HTML/CSS 代码有问题。我有一个父 div (secClass)，其中有 2 个子 div(secClass1 和 secClass2)。问题是子 div 的内容没有包含在父 div 中。你知道这里有什么问题吗？我已经包含了屏幕截图和代码以供引用。

div.secClass {
  background-color: 806815;
  height: 1000px;
}
div.secClass1 {
  background-color: D4BD6A;
  display: inline-block;
}
div.secClass2 {
  background-color: D4BD6A;
  display: inline-block;
}

<div id="section" class="secClass">

  <div class="secClass1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <div class="secClass2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

</div>

<div id="Lnav" class="navClass">

<div class="navClassItems"><hr>
Main Page<br><hr>
Metrics <br><hr>
Contact us<br><hr>
</div>

</div>

div.navClass
{
float:left;
background-color:D4BD6A;
width:150px;
height:700px;
}

div.navClassItems
{
text-align:center;
}

Answer 1

由于您的 navClass float ，问题是 secClass div 无法容纳，因为它默认为 100% 宽度。如果您在概念上将其设置为 100% - 150px，您的 secClass div 将弹出到该位置。例如:

#Wrapper{
  ...
  width:1000px;
  ...
}
.navClassItems {
  ...
  width:150px;
  ...
}
.secClass {
  ...
  width:850px;
  ...
}

与

<div id="wrapper">
<div id="Lnav" class="navClass">

<div class="navClassItems"><hr>
Main Page<br><hr>
Metrics <br><hr>
Contact us<br><hr>
</div>

</div>
<div id="section" class="secClass">

<div class="secClass1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="secClass2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</div>

不要忘记考虑边距或填充。查看 box-sizing 和 CSS display: inline vs inline-block SO 文章了解更多信息。

抱歉，我刚刚发现我将 .navClassItems 错误命名为 .navClass。现在应该更准确了。