CSS边框不适用于DIV

Question

很容易看到。在示例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;
}[...]

Answer 1

添加浮点数：如果边框应该在divs附近，则向左移动.tripple

Answer 2

和

display: inline-block;

到.triple

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

Answer 3

你需要清除浮子。当所有子元素都浮动时，父元素不知道它们的高度，因此会崩溃。在父级上放置类似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 vs overflow的更多信息，请查看这个非常可靠的问答：What methods of ‘clearfix’ can I use?

Answer 4

你应该清除浮动：你可以使用HTML5样板中的这个标准css：

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

.clearfix:after {
    clear: both;
}

Fiddle

<div class="tripple clearfix">

Answer 5

我个人在这些场合使用clear:both的div。检查这个小提琴。

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

Answer 6

以下的浮动属性：

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

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

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