html - 页脚中的 3 列 - 右侧对齐错误

Question

为了将页脚分成 3 列，我必须在第三列使用负边距。
我相信还有另一种方法不需要强制此列就位。

HTML:

<footer>
    <div class="fLeft">
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
    </div>
    <div class="fCenter">
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
    </div>
    <div class="fRight">
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
        <p>Link</p>
    </div>
</footer>

CSS:

footer{
    background:#2c2c2c;
    height:200px;
    border-radius: 25px 25px 0 0;
    margin:40px 20px 0 20px;
    color:#FFFFFF;
}

.fLeft{
    margin:10px 0 0 10px;
    float:left;
    width: 33.3%;
    text-align:center;
}

.fCenter{
    margin:10px 0 0 0;
    float:left;
    width: 33.3%;
    text-align:center;
}

.fRight{
    margin:-160px 10px 0 0;
    float:right;
    width: 33.3%;
    text-align:center;
}

现场演示:jsFiddle

你可以看到我得到的错误，但是 -160px 对我来说是一个修复，-80px 是对 fiddle 的修复。

Answer 1

这是因为您将右侧的列推到下一行。每列的宽度为 33.3%，但 .fLeft 的左边距和 .fRight 的右边距也为 10px，导致所有宽度加在一起超过您想要容纳所有内容的 100%。如果您删除这两个边距，您将看到列正确排列。如果您想保留这些边距，则必须更改宽度。