1

我正在尝试在两个浮动 div 的底部创建一个 div，但在底部 div 和其他 div 之间有一个边距。

这是小提琴

html:

<html><head></head>
<body>
    <div class="left">Hello</div>
    <div class="right">Hello</div>
    <div class="bottom">Hello</div>

</body>
</html>

CSS：

.left {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.right {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.bottom {
    clear: both;
    margin-top: 20px;
}
4

2 回答 2

1

使用一个清晰​​的类它对我有用（小提琴）：

<html><head></head>
<body>
    <div class="left">Hello</div>
    <div class="right">Hello</div>
    <div class="clear"></div>
    <div class="bottom">Hello</div>
</body>
</html>​

.left {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.right {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.bottom {
    margin-top: 20px;
}

.clear {
    clear: both;
}

​</p>

于 2012-11-18T16:15:28.123 回答
0

即使您正在清除这些浮动（使用 clear: both），最终 div 的边距也不会将其定位在远离它们的位置。事实上，该边距实际上隐藏在浮动后面。

通过引入一个额外的元素来解决这个问题是很诱人的——要么是在浮点数之后的一个空的清除元素，要么是一个围绕它们的包装器。

然而，为了保持标记尽可能干净，通常只为浮动添加底部边距是合适的。

因此，您必须将此边距定义为第一个 div。所以它会像这样工作：

CSS：

.left {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
    margin-bottom: 20px;
}

.right {
    width: 150px;
    height: 100px;
    float: left;
    border: 1px solid #000;
}

.bottom {
    clear: both;
}
于 2012-11-18T16:14:35.740 回答