css构建一个典型的页脚

Question

构建典型CSS页脚的适当代码是什么。框轮廓仅仅是为了将它们标记为统一，但不应该显示为实体。建立这样的结构的简单css框架将不胜感激！

它的典型具体应用就是这样。

Answer 1

HTML：

<div class="footer">
    <div class="row">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
    <div class="row">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
    <div class="row">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
</div>

CSS：

.footer .row {
    float: left;
    width: 33.3%;
}

JSFiddle：http://jsfiddle.net/nQpPw/

如果您想要更多行，那么您所要做的就是更改HTML dom并增加行宽。对于4，它将是宽度：25％等。

Answer 2

我会这样：

HTML：

<div id="footer">
<div class="footer-content">
    <div class="col"></div>
    <ul>
        <li>link#1</li>
        <li>link#1</li>
        <li>link#1</li>
    </ul>
    <div class="col"></div>
    <ul>
        <li>link#1</li>
        <li>link#1</li>
        <li>link#1</li>
    </ul>
    <div class="col"></div>
    <ul>
        <li>link#1</li>
        <li>link#1</li>
        <li>link#1</li>
    </ul>
</div>

CSS

#footer {
     width:960px;
     background-color:grey;
     height:400px;
 }
 .footer-content {
     width: 800px;
     padding-top:50px;
     margin:0 auto;
 }
 .footer-content ul {
     float:left;
     margin-right: 100px;
     list-style: none;
 }

请参阅演示：http://jsfiddle.net/KDm9N/1/