4

它很容易看到。在示例 1 中一切正常，但是当我在示例 2 中添加一行代码时，它就坏了。为什么？我应该如何编码？

示例 1：http: //jsfiddle.net/sUtvd/154/

[...].tripple {
width: 90%;
margin: 5%;
}[...]

示例 2：http: //jsfiddle.net/Ec95D/3/

[...].tripple {
width: 90%;
margin: 5%;
border: solid;
}[...]
4

6 回答 6

1

Add float:left to .tripple if border should go all way around divs

于 2013-11-06T16:01:51.673 回答
1

添加

display: inline-block;

到.triple

http://jsfiddle.net/LaN5z/1/

于 2013-11-06T16:07:48.903 回答
0

You should clear your floats: you can use this standard css from HTML5 biolerplate:

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

Fiddle

<div class="tripple clearfix">
于 2013-11-06T16:02:20.697 回答
0

浮动属性在：

.left, .right, .middle {
    float:left;
    width: 33%;
    height: 100px;
}

使父 div 为空。Float 是一个 CSS 定位属性。

可能有更好的方法，但一种简单的方法是将每个彩色框放在一个具有 0 单元格间距和填充的表格中。

于 2013-11-06T16:14:57.133 回答
0

我个人使用 divclear:both用于这些场合。检查这个小提琴。

http://jsfiddle.net/Ec95D/7/

于 2013-11-06T16:10:47.603 回答
0

你需要清除浮动。当所有子元素都浮动时，父元素不知道它们的高度，因此会折叠。将诸如 clearfix 之类的东西放在父级上应该可以解决问题。有关 clearfix 的详细信息，请参阅http://nicolasgallagher.com/micro-clearfix-hack/。

有关工作示例，请参见http://jsfiddle.net/designingsean/Ec95D/4/ 。链接中的 CSS 如下。然后只需添加.cf到父元素。

.cf:before,
.cf:after {
  content: " ";
  display: table;
} 

.cf:after {
  clear: both;
}

你也可以让父母有一个overflow几乎任何东西的集合，尽管auto在大多数情况下是最有意义的。有关该示例的工作示例，请参见http://jsfiddle.net/designingsean/cx7Wg/。

有关 clearfix 与溢出的更多信息，请查看这个非常可靠的 SO 问题和答案：我可以使用哪些“clearfix”方法？

于 2013-11-06T16:01:15.173 回答