Question

我有一系列嵌套的div，看起来如此： Nested divs screenshot

HTML和CSS如下。但是，从图像中可以看出，右上方的div（0 started and sleeping for 4 1 started and sleeping for 1 2 started and sleeping for 1 3 started and sleeping for 6 4 started and sleeping for 5 5 started and sleeping for 9 got 1 6 started and sleeping for 5 got 2 7 started and sleeping for 6 got 0 8 started and sleeping for 6 got 4 9 started and sleeping for 8 got 6 10 started and sleeping for 9 got 3 11 started and sleeping for 6 got 7 12 started and sleeping for 9 got 5 ...）并未填满整个高度。我已经确定可以通过将此div .inner-top-mark设置为display:，flex或table来解决此问题。我的问题只是为什么当inline-block div没有同样的问题时会发生这种情况。我已经看到一些类似的问题浮出水面，但似乎都没有解决为什么方面，每个人的特定解决方案似乎因具体情况而异，因此防止未来出现问题无济于事。

HTML：

.inner-bottom-opts

CSS：

<div class="container">
  <div class="part1_labelleft">
    <p><strong>Lorem ipsum</strong></p>
  </div>

  <div class="part1_markup_right">
    <div class="inner-top-mark">
      <p><em><strong>Lorem ipsum</strong></em></p>
    </div>

    <div class="inner-bottom-opts">
      <p>Lorem ipsum</p>
    </div>
    <div class="inner-bottom-opts">
      <p>Lorem ipsum</p>
    </div>
    <div class="inner-bottom-opts">
      <p>Lorem ipsum</p>
    </div>
    <div class="inner-bottom-opts">
      <p>Lorem ipsum</p>
    </div>

  </div>
</div>

提前致谢。

Answer 1

你的div＆＃34;内部标记＆＃34;在浮动元素的列表中，但它自己不浮动。这是一个副作用，导致你的div只有子元素的高度（在你的情况下是＆＃34; p＆＃34;）。因此，如果你将float：left或float：inherit添加到你的＆＃34; inner-top-mark＆＃34; -div，它将具有正确的高度。

为什么一个孩子在其他人做的时候不会填补它的高度？

1 个答案: