CSS 布局帮助 - 3 列页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/462931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css layout help - 3 column footer
提问by Micah
I'm trying to get the footer in my site to look like this:
我试图让我网站的页脚看起来像这样：
Wilgrove Baptist Church Home | About | Ministries 1234 S. Main st. John G. Smith, Sr. Pastor Contact Us | Site Map somwhere, ID 55555
My problem is getting it laid out into the 3 columns. Any suggestions?
我的问题是把它放在 3 列中。有什么建议？
Thanks!
谢谢！
回答by Jayx
Quite easily done using floats:
使用浮动很容易完成：
<div id="footer">
<p class="left">Left aligned text here<br />Next line here</p>
<p class="right">Right aligned text here<br />Next line here</p>
<p class="centered">Center Text here<br />Next line here</p>
</div>
and the CSS:
和 CSS：
.left{
text-align:left;
float:left;
}
.right{
float:right;
text-align:right;
}
.centered{
text-align:center;
}
回答by unigogo
回答by Xanthir
<div id="footer">
<div>foo</div>
<div>bar</div>
<div>baz</div>
</div>
#footer { display: table; width: 100%; table-layout: fixed; }
#footer > div { display: table-cell; }
This won't work in IE 7 and prior, though. In that case I recommend serving them (through IE conditional comments) markup similar to alex, where you use simple floats. These won't center properly, but they'll certainly work, and as people upgrade to IE8 or a better browser they'll automatically upconvert to the display:table solution.
但是，这在 IE 7 及更早版本中不起作用。在这种情况下，我建议为它们提供（通过 IE 条件注释）类似于 alex 的标记，您可以在其中使用简单的浮点数。这些不会正确居中，但它们肯定会工作，并且随着人们升级到 IE8 或更好的浏览器，他们会自动向上转换为 display:table 解决方案。
回答by George Stocker
Here are a list of three column CSS layouts. Alistapart.comalso has an articleon it.
以下是三列 CSS 布局的列表。 Alistapart.com也有一篇关于它的文章。
I'd recommend reviewing the 'Three Column CSS layouts' list; each link goes into detail about what it looks like from a 'Newspaper Layout' standpoint, as well as the advantages and disadvantages of each. I used it for a three column layout for the site I'm maintaining.
我建议查看“三列 CSS 布局”列表；每个链接都从“报纸版面”的角度详细介绍了它的外观，以及每个链接的优缺点。我将它用于我正在维护的站点的三列布局。
回答by Daze
To have three columns of almost equal width:
要具有几乎相等宽度的三列：
HTML:
HTML：
<div id="footer">
<p>First section, first line of text<br /> Second line of text</p>
<p>Second section, first line of text<br /> Second line of text</p>
<p>Third section, first line of text<br /> Second line of text</p>
</div>
CSS:
CSS：
#footer > p:first-child {
float: left;
text-align: left;
width: 33.3%; }
#footer > p:nth-child(2) {
float: left;
text-align: center;
width: 33.4%; }
#footer > p:last-child {
float: right;
text-align: right;
width: 33.3%; }
Compared to Jayx's answer, I've simplified the markup and used different selectors in the stylesheet.
与 Jayx 的回答相比，我简化了标记并在样式表中使用了不同的选择器。
Read more about fractional percentage lengths.
阅读有关小数百分比长度的更多信息。
回答by shea
I used the following code on my own site.
我在自己的网站上使用了以下代码。
HTML:
HTML：
<footer>
<aside class="footer-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</aside>
<aside class="footer-right">
Aenean elit ante, ultrices ac vestibulum id, tempor id nisi.
</aside>
<aside class="footer-center">
Integer tincidunt, sem at placerat ullamcorper, urna felis condimentum justo.
</aside>
</footer>
CSS:
CSS：
footer [class ^= 'footer-'] {
width: 33.3333%;
display: inline-block;
text-align: center;
}
footer .footer-left {
float: left;
}
footer .footer-right {
float: right;
}
All content will be center-aligned because that's what I wanted. You can easily change this, though.
所有内容都将居中对齐，因为这就是我想要的。不过，您可以轻松更改此设置。
回答by Tabetha Moe
Actually, the text-align code works other than the fact that you have the text angling toward the end. To fix this, simply apply a margin-top negative value to line up with the left text. Take a look...
实际上，除了文本向末尾倾斜这一事实之外，文本对齐代码还有效。要解决这个问题，只需应用一个 margin-top 负值来与左边的文本对齐。看一看...
#left {
text-align:left;
}
#right {
text-align:right;
margin-top:-35px;
}
#center {
text-align:center;
margin-top:-35px;
}
回答by alex
Try this:
尝试这个：
<div style="float:left; padding:10px;">left</div>
<div style="float:left; padding:10px;">center</div>
<div style="float:left; padding:10px;">right</div>
You can adjust the padding, etc. accordingly.
您可以相应地调整填充等。
