div中没有​​包含div的问题

Question

我的HTML / CSS代码存在问题。我有一个父div（secClass），并且我有2个子div（secClass1和secClass2）。问题是子div的内容不包含在父div中。你知道这里的问题是什么吗？我已经包含了截图和代码供参考。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<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浮动左侧，问题是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。现在应该更准确了。