css - css - 填充传播到下一列

Question

我有这个基本的 HTML 结构：

<div id="left-column"></div>
<div id="content"></div>
<div id="right-column"></div>

这个CSS：

#left-column
{
    padding-top: 25px;
    width: 80px;
    background: url('../../common/images/black70.png');
    height: 100%;
    float: left;
    margin-right: 5px;
}

#content
{
    padding: 5px;
}

#right-column
{
    padding-top: 25px;
    width: 190px;
    background: url('../../common/images/black40.png');
    height: 100%;
    float: right;
}

问题是内容填充正在传播到右列：

我怎样才能避免这种情况？

谢谢

Answer 1

问题是您在文档流中的#right-column之后#content，它将在内容之后开始，该内容10px的顶部和底部填充具有高度。

如果您像这样重新排序 HTML，它可以解决您的问题。

<div id="left-column"></div>
<div id="right-column"></div>
<div id="content"></div>

这是一个jsfiddle

Answer 2

如果你有浮动的东西和非浮动的东西，浮动的东西应该总是在源中的非浮动的东西之前。

在您的情况下，首先呈现内容，然后是其下方的右栏。