页脚中的3列 - 右侧队列错误

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

来源

2012-09-24 weewa

你为什么要改变顶部边缘？不会像这样更多你想要什么http://jsfiddle.net/j08691/EbvJV/2/？ – j08691

精美的作品。谢谢 – weewa

好的，我会做出答案，你可以接受它。 – j08691

您可以修改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; 
}

来源

2012-09-25 13:38:27 j08691

这是因为您正在将右列推到下一行。每列的宽度为33.3％，但在.fLeft上也有一个左边距，在.fRight上的右边距为10px，因此所有边的宽度都大于您想要适合所有内容的100％。如果你删除这两个边界，你会看到列正确排列。如果你想保持这些边距，你将不得不改变你的宽度。

来源

2012-09-24 20:59:22

真棒。你刚刚为我节省了几小时的facepalm。谢谢。 – weewa

这是你在找什么：

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-24 20:59:32 Chanckjh

是的，这是很好，但我希望在页脚的顶部和顶部的文本行之间有空格 – weewa

@weewa您可以使用填充顶部创建空间 – Chanckjh

页脚中的3列 - 右侧队列错误

回答

相关问题