Question

我确定这将是非常基本的，但我对编码很新，而且我还在学习。我有以下div s：

<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;
}

Answer 2

您需要清除浮动元素。您可以在overflow:hidden

上使用clearfix或wrapper

JSFIDDLE

如何在一些div下添加水平线？

2 个答案: