本文主要是介绍CSS3多行多栏布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
当前布局由6个等宽行组成，其中第四行有三栏，第五行有四栏。
重点第四行设置：
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>img {height: 100px;;}section#feature_area {background: #dcd9c0;}section#feature_area article {float: left;width: 320px;padding: 10px 0;background: #fff;border-top: 4px solid #f7be84;}section#feature_area article:nth-child(2) {background: gold;}section#feature_area article .inner {margin: 10px 20px;padding: 5px;background: #fff;border: 5px solid;}section#feature_area article:nth-child(1) .inner {border-color: #d7dd6f;}section#feature_area article:nth-child(2) .inner {border: 5px solid #f6dec5;}section#feature_area article:nth-child(3) .inner {border-color: #d1d8e4;}</style>
</head><body><div id="wrapper"><header><h1>全宽度内容</h1></header><nav><p>导航到菜单</p></nav><section id="branding"><img src="./img/charlie.png" alt="查理" /></section><section id="feature_area"><article><div class="inner"><p>演示文本</p></div></article><article><div class="inner"><p>演示文本</p></div></article><article><div class="inner"><p>演示文本</p></div></article></section><section id="promo_area"><article><div class="inner"><p>演示文本</p></div></article><article><div class="inner"><p>演示文本</p></div></article><article><div class="inner"><p>演示文本</p></div></article><article><div class="inner"><p>演示文本</p></div></article></section><footer><p>一个CSS模板，<a href="http://www.stylinwithcss.com">Stylin' with CSS,第三版</a>作者Charles Wyke-Smith</p></footer></div>
</body></html>小结：hook,路标，钩子，表示代码中一个唯一的参照点，其他代码通过这个参照点可以与相应的代码交互。
这篇关于CSS3多行多栏布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
