需要帮助找出div的边界

Question

我一直在创建一个简单的网站作为项目的一部分，我正在努力弄清楚为什么div的内容正在扩展到它之外。以下是相关的HTML代码：

#links_container {
  background-color: DodgerBlue;
  border: 2px solid white;
  height: 10%;
}
#about_me {
  display: inline-block;
  text-align: center;
  height: 100%;
  width: 19.6%;
  background-color: DodgerBlue;
}
#about_me p {
  line-height: 600%;
}
#about_me:hover {
  background-color: DeepSkyBlue;
}
#webpage_designs {
  display: inline-block;
  text-align: center;
  height: 100%;
  width: 19.6%;
  background-color: DodgerBlue;
}
#webpage_designs p {
  line-height: 600%;
}
#webpage_designs:hover {
  background-color: DeepSkyBlue;
}
#resume_link {
  display: inline-block;
  text-align: center;
  height: 100%;
  width: 19.6%;
  background-color: DodgerBlue;
}
#resume_link p {
  line-height: 600%;
}
#resume_link:hover {
  background-color: DeepSkyBlue;
}

<div id="links_container">

  <div id="about_me">
    <p>About Me</p>
  </div>

  <div id="webpage_designs">
    <p>Webpage Designs</p>
  </div>

  <a href="resume.html">
    <div id="resume_link">
      <p>Resume</p>
    </div>
  </a>

  <div id="link_4">
    <p>Link 4</p>
  </div>

  <div id="link_5">
    <p>Link 5</p>
  </div>

</div>

所有的div都延伸到它们应该包含在div的边界之下，我无法弄清楚原因。

Answer 1

我觉得你在这里错过了一些CSS。我不太明白为什么三个第一个div有display: inline-block而不是最后两个。

无论如何，如果你想强制执行#links_container div中元素的 contaiment ，你可以在父div中使用overflow: hidden。这将隐藏逃离图层边界框的所有内容。