如何在某些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

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

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