0

フッターを3列に分割するには、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が10pxであるため、すべてを合わせた幅は、すべてを収めたい100％を超えています。削除した場合これらの2つの余白には、列が正しく並んでいることがわかります。これらのマージンを維持したい場合は、幅を変更する必要があります。

于 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 に答える