Question

我有一个带有图像和旁边一些文本的元素，内容位于父级内部。

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

以下是查看和编辑代码的小提琴： 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

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

内容脱离父级并转到下一个元素

1 个答案: