Question

我这里有这个代码：

<div style="border:3px solid #808080;">
    <h1 style="text-transform: uppercase;font-size: 38px;color: #808080;text-align: center;">Lowell</h1>
    <div class="column-1">
         <img src="images/ruler-icon.png">
    </div>
    <div class="column-2">
         <img src="images/bed-icon.png">
    </div>
    <div class="column-3">
         <img src="images/bath-icon.png">
    </div>
</div>

我的问题是边框没有越过第1列，第2列，第3列......这些元素是左边浮动的，我如何将它们包含在边框中？

这是CSS

.column-1, .column-2, .column-3
{
    float:left;
    width: 33%;
    border-right: 3px solid #808080;
    height: 52px;
    padding: 10px;
}

Answer 1

在RemyaJ提到的浮动div之后，在父clear:both属性中添加div。像这样

https://jsfiddle.net/zmasvt8b/

或者

只需将overflow:hidden属性赋予父div。喜欢这个

https://jsfiddle.net/jv5xtLg9/

Answer 2

我意识到你已经选择了一个答案，但这里有一个替代方案 - 使用flexbox。我还将所有CSS与HTML分开（就像它应该！）

＆＃13;

.container {
  /* Important for columns */
  display: -webkit-flex;
  display: flex;
}

.item {
  /* Important for columns */
  flex-grow: 1;
  border: 3px solid #808080;
  border-top: none;
  height: 52px;
  padding: 10px;
}

.heading {
  border: 3px solid #808080;
  margin: 0;
  text-transform: uppercase;
  font-size: 38px;
  color: #808080;
  text-align: center;
}


/* Remove duplicate borders */
.item-2 {
  border-left: none;
  border-right: none;
}

＆＃13;

<h1 class="heading">Lowell</h1>
<div class="container">

  <div class="item item-1">
    <img src="images/ruler-icon.png">
  </div>

  <div class="item item-2">
    <img src="images/bed-icon.png">
  </div>

  <div class="item item-3">
    <img src="images/bath-icon.png">
  </div>
</div>

＆＃13;

Answer 3

添加一个样式清晰的div：在父div中的浮动div之后。这有望解决这个问题。

Answer 4

原因是父元素永远不会包含浮动元素。要实现此目的，只需将overflow:auto;添加到主div即可。这将是force the div to contain floated elements that "overflow" the container。

There are other, probably better ways to accomplish the same thing但这是最简单的。

永远不要添加HTML元素来做CSS可以做和应该做的事情。

Answer 5

我认为这是你需要的css。根据您的需要选择宽度。

.column-1, .column-2, .column-3
{
    width: 30%;
    border-right: 3px solid #808080;
    height: 52px;
    padding: 10px;
    display:inline-block;
}

CSS - 边界不会超过向左浮动的元素

5 个答案: