css - html/css 中的内容溢出主体

Question

我在学习css的时候写了一个示例页面。但是我发现我的 div 中有 2 个溢出了 body 内容，而 footer 位于 div 之上。

body {
  background-color: white;
}
#div1 {
  margin: 50px;
  text-align: justify;
  width: 40%;
  position: absolute;
  left: 150px;
  top: 400px;
}
#div2 {
  margin: 50px;
  width: 35%;
  position: absolute;
  left: 800px;
  top: 400px;
}
#div3 {
  position: relative;
  width: 100%;
  height: 200px;
  top: 500px;
  background-color: black;
  color: white;
}
footer {
  background-color: black;
  color: white;
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

<div id="div1">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
  </p>
  <h1 id="head2"><b>What I can help you with:</b></h1>
  <p>
If you’re a company or an agency that cares about creating great user experiences and are looking for someone to help you build a fast, accessible and standards-compliant responsive web site or application, I can help
  </p>
</div>
<div id="div2">
  <h3>TESTIMONIAL</h3>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
  </p>
</div>
<footer>
  <div id="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ip</div>
</footer>

问题是 div2 和 div3 超出了 footer 并且整个页面变得丑陋。当我通过 chrome 中的检查元素检查时，那些 div 的内容在 body 之外。

Answer 1

你到处都在使用 position:absolute，但你并不需要它。而是使用 inline-block 例如。

body {
  background-color: white;
  margin: 0;
}
.div {
  margin: 5%;
  display: inline-block;
  vertical-align: top
}
.w40 {
  text-align: justify;
  width: 40%
}
.w35 {
  width: 35%
}
 {} footer {
  background-color: black;
  color: white;
  width: 100%;
}

<div class="div w40">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
  </p>
  <h1 id="head2"><strong>What I can help you with:</strong></h1>
  <ul>
    <li>Lorem Ipsum is simply dummy text of th</li>
    <li>Lorem Ipsum is simply dummy text of th</li>
    <li>Lorem Ipsum is simply dummy text of th</li>
  </ul>
</div>
<div class="div w35">
  <h3>TESTIMONIAL</h3>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
  </p>
</div>
<footer>
  <div id="left">Lorem Ipsum is simply dummy text of the printing and typesetting
  </div>
</footer>