css - 典型的なフッターを構築するための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 の場合は width: 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/