Question

我正试图让我网站中的页脚看起来像这样：

Wilgrove Baptist Church             Home | About | Ministries            1234 S. Main st.
John G. Smith, Sr. Pastor              Contact Us | Site Map           somwhere, ID 55555

我的问题是将它列入3列。有什么建议吗？

谢谢！

Answer 1

使用花车很容易做到：

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

和CSS：

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

Answer 2

3 column layout generator

Answer 3

以下是three column CSS layouts的列表。 Alistapart.com也has an article就可以了。

我建议您查看“三栏CSS布局”列表;每个链接都详细介绍了从“报纸布局”的角度看它的外观，以及每个链接的优缺点。我将它用于site I'm maintaining的三列布局。

Answer 4


<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; }

但这在IE 7和之前的版本中不起作用。在这种情况下，我建议为它们（通过IE条件注释）提供类似于alex的标记，在那里使用简单的浮点数。这些将无法正常使用，但它们肯定会正常工作，随着人们升级到IE8或更好的浏览器，它们将自动上转换为display：table解决方案。

Answer 5

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

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：

#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%; }

与Jayx的答案相比，我简化了标记并在样式表中使用了不同的选择器。

详细了解fractional percentage lengths。

Answer 6

实际上，文本对齐代码的工作原理不是你让文本朝着末尾倾斜。要解决此问题，只需应用margin-top负值即可与左侧文本对齐。看看......

#left {
    text-align:left;
}

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

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

Answer 7

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

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：

footer [class ^= 'footer-'] {
    width: 33.3333%;
    display: inline-block;
    text-align: center;
}

footer .footer-left {
    float: left;
}

footer .footer-right {
    float: right;
}

所有内容都是中心对齐的，因为这就是我想要的。不过，你可以很容易地改变它。

Answer 8

试试这个：

<div style="float:left; padding:10px;">left</div>
<div style="float:left; padding:10px;">center</div>
<div style="float:left; padding:10px;">right</div>

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

Css布局帮助 - 3列页脚

8 个答案:

HTML：

CSS：