そのような典型的なCSSフッターを構築するための適切なコードは何ですか? ボックスの輪郭は、それらが一体であることを示すためのものであり、実線で示されているわけではありません。このような構造を構築するためのシンプルな CSS フレームワークを歓迎します!
それの典型的な具体的なアプリケーションは、このようなものです。
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% などになります。
私は次のようにします:
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/