html - 浮动 div 会影响我屏幕中其他 div 的高度

Question

看看我的 html + css 代码：http: //jsfiddle.net/nP39E/1/

如果不明白我想要达到的目标，我会解释：

我想要一个页面，其中 div 向右浮动并占用 250px 宽度，而 div 则占用文档其余部分的宽度。

在左边的 div 中，你可以看到我还有一些其他的浮动元素，它们的高度是由右边的 div 影响的。您可以看到第一行（红色）的高度与右侧栏的高度对齐，并且与其内容的真实内容无关。

你能告诉我为什么会这样吗？

score 0 · Accepted Answer

我刚刚从最后一个答案更改了内容 div 的 CSS：

.content {
    background: #888;
    padding: 10px;
    position: absolute;
    right: 270px;
    left: 0;
}

你认为呢？

score -1 · Accepted Answer

您提供的 margin-right:270px 比可用空间宽，所以只需删除它。你也应该让内容浮动：左。

.content {
    background: #888;
    padding: 10px;
    float:left;
}

score -1 · Accepted Answer

display: table不打算用于这样的布局，它对于特定的等高情况更有用。

正确浮动 div 而不使用margin-right推动左 div 将起作用：

.content {
    background: #888;
    padding: 10px;
    float: left;
    width: 250px;
}

3 回答 3