html - 内容离开父元素并转到下一个元素

Question

我有一个带有图像和旁边一些文本的元素，内容在父元素中居中。

当我尝试在图像和文本之后添加更多元素时，如您所见，带有红色边框的绿色文本溢出父级 .about 并转到下一个父级 .contact-我们

这是查看和编辑代码的 fiddle : https://jsfiddle.net/04rmefx7/

代码如下:

body,
html {
  height: 100%;
}

.inline-block {
  display: inline-block;
}


/* Start about */

.about {
  background-color: #dad04a;
  position: relative;
  height: 100%
}

.about img {
  height: 100px;
}

p{
  border: 4px solid red;
  color: green;
  font-weight: bold;
}

/* End about */


/* Start contact-us */

.contact-us {
  background-color: #eeb03c;
}


/* End contact-us -->

<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Start about -->
<div class="about text-center">
  <div class="inline-block">
    <img class="pull-left" src="https://placehold.it/600">
    <div class="pull-left text-left">
      <h4 class="inline-block">Heading</h4>
      <span>Lorem ipsum dolor sit amet</span>
      <br>
      <span>Lorem ipsum dolor sit amet</span>
      <br>
      <span>Lorem ipsum dolor sit amet</span>
      <br>
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
      <br>
      <span>Lorem ipsum dolor sit amet</span>
    </div>
    <div class="clearfix"></div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et velit officia alias harum nam illum pariatur deleniti reprehenderit, aliquam, commodi iure modi, facilis error dolorum doloribus. Porro, hic explicabo dolores. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Dolore dolor explicabo quas, est, iure non repellendus eaque, nemo eum repudiandae voluptatem rem quos iste a. Non nisi aliquid consequuntur. Libero!</p>
</div>
<!-- End about -->

<!-- Start contact-us -->
<div class="contact-us text-center">
  <h2>Contact us</h2>
</div>
<!-- End contact-us -->

Answer 1

从 .about 中删除 height: 100% 对你有用吗？