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是对小提琴的修复。

Answer 1

这是因为您正在将右列推到下一行。每列的宽度为33.3％，但是.fLeft上的左边距和.fRight上的右边距为10px，导致所有宽度一起超过100％你希望适应所有内容。如果删除这两个边距，你会看到列正确排列。如果你想保留这些边距，你将不得不改变你的宽度。

Answer 2

这就是你要找的东西：

http://jsfiddle.net/t5Xhj/

你不应该使用边距

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

.fLeft{
float:left;
width: 33.3%;
text-align:center;
}

.fCenter{
float:left;
width: 33.3%;
text-align:center;
}

.fRight{
 float:right;
 width: 33.3%;
 text-align:center;
}

Answer 3

您可以将CSS修改为更像以下内容，以获得您所追求的效果。

<强> jsFiddle example

<强> CSS

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

.fLeft{
float:left;
width: 33%;
text-align:center;
}

.fCenter{
width: 33%;
text-align:center;
    float:left;
}

.fRight{
float:right;
width: 33%;
text-align:center;
}

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

3 个答案: