0

我的小提琴：

http://jsfiddle.net/yJdbF/17/

HTML：

<div class="container">
    <div class="content">
        <div class="span70">
            DDDDD
        </div>
        <div class="span30">
            FFFFFFFFFF
        </div>
    </div>
</div>

CSS：

.container {
  margin-top : 65px;
}

.content {
  border : 10px solid green;
}

.span30 {
  width: 40%;
  background-color : red;
  float : left;
}
.span70 {
  width: 60%;
  background-color : blue;
  float : left;

}

div.span70 和 div.span30 没有完全包含在 div.content 中。span* div 是浮动的 div（这很棘手）。

我怎样才能将它们完全包含在内？

4

3 回答 3

2

如果你把

溢出：隐藏；

在您的 .content 类上，然后它可以工作。

于 2013-02-16T11:59:43.650 回答
1

你需要清除你的浮动。例如，使用 Nicolas Gallagher micro clear-fix或简单地使用overlow: hidden

.content {
    border : 10px solid green;
    overflow: hidden;
}

演示

于 2013-02-16T11:59:09.250 回答
0

您应该添加一个 clearfix 查看更新的fiddle。

CSS

.clear {
  clear:both;
}

html

<div class="container">
    <div class="content">
        <div class="span70">
            DDDDD
        </div>
        <div class="span30">
            FFFFFFFFFF
        </div>
    </div>
    <div class="clear"></div>
</div>
于 2013-02-16T11:59:11.527 回答