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

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

在您的情况下，首先渲染内容，然后在右下角渲染内容。