0

为了将我的页脚分成 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是小提琴上的修复。

4

3 回答 3

1

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

于 2012-09-24T20:59:22.177 回答
1

这是你想要的：

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;
}​
于 2012-09-24T20:59:32.267 回答
0

您可以将 CSS 修改为更像以下内容以获得您想要的效果。

jsFiddle 示例

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;
}​
于 2012-09-25T13:38:27.323 回答