Css布局帮助-3列页脚-Csslayouthelp-3columnfooter

Quite easily done using floats:

使用浮动很容易做到:

    
Left aligned text here
Next line here
    
Right aligned text here
Next line here
    
Center Text here
Next line here

and the CSS:

和CSS:

.left{
text-align:left;
float:left;
}
.right{
float:right;
text-align:right;
}
.centered{
text-align:center;
}

3 column layout generator

3列布局生成器

Here are a list of three column CSS layouts. Alistapart.com also has an article on 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布局”列表;每个链接都详细介绍了从“报纸布局”的角度看它的外观,以及每个链接的优缺点。我将它用于我正在维护的网站的三列布局。

  
foo
  
bar
  
baz


#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解决方案。

To have three columns of almost equal width:

要有三列几乎相等的宽度:

HTML:

    
First section, first line of text
 Second line of text
    
Second section, first line of text
 Second line of text
    
Third section, first line of text
 Second line of text

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.

阅读有关小数百分比长度的更多信息

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...

实际上,text-align代码的工作原理不是你有文本朝向末尾的方向。要解决此问题,只需应用margin-top负值即可与左侧文本对齐。看一看...

#left {
    text-align:left;
}

#right {
    text-align:right;
    margin-top:-35px;
}

#center {
    text-align:center;
    margin-top:-35px;
}

I used the following code on my own site.

我在自己的网站上使用了以下代码。

HTML:

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.

所有内容都是中心对齐的,因为这就是我想要的。不过,你可以轻松改变这一点。

Try this:

left
center
right

You can adjust the padding, etc. accordingly.

您可以相应地调整填充等。