html - 如何在某些 div 下方添加水平线？

Question

我确信这将是非常基础的，但我对编码还很陌生，而且我仍在学习中。我有以下 div:

<div class="wrapper">
 <div class="panel-panel panel-col-left">
  <div class="inside"><?php print $content['top_left']; ?></div>
  </div>
  <div class="panel-panel panel-col-middle">
   <div class="inside"><?php print $content['top_middle']; ?></div>
  </div>
  <div class="panel-panel panel-col-right">
   <div class="inside"><?php print $content['top_right']; ?></div>
  </div>
 </div>
</div>

现在，我想在整个部分下方添加一条水平线，因此我尝试添加以下 CSS 代码:

.wrapper {
  border-bottom: 1px solid #ccc;
}

.panel-col-left {
  float: left;
  width: 20%;
}

.panel-col-middle {
  float: left;
  width: 40%;
}

.panel-col-right {
  float: left;
  width: 40%;
}

显然，这显示不正确:水平线位于顶部。

我做错了什么？

Answer 1

因为您 float 了子 div，您需要限制 float div 容器的 block 格式上下文并将 overflow:auto 添加到 .wrapper 以便它可以包含它们再次:

.wrapper {
    border-bottom: 1px solid #ccc;
    overflow:auto;
}