多列布局 css3 column属性
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style>
div{ -moz- Firefox的前缀
-webkit- Chrome和safari
-ms- IE
-o- opera
/*-moz-column-width:150px;自动设置列数
-moz-column-count:3;设置列数，auto为1列
-moz-columns:auto 3;宽自动，列数：3*/
-moz-columns:200px 3; /*每列的最小宽度为200px，当缩小到200px以内时，列数就自动。*/
-moz-column-gap:20px; /*列与列之间的距离*/
-moz-column-rule:2px dashed #ccc;/*列与列之间的分割线，这个分割线不会破坏布局*/
-moz-column-span:all; /*设置跨列大标题，none则不跨列；*/
-webkit-columns:200px 3;
-webkit-column-gap:20px;
-webkit-column-rule:2px dashed #ccc;
columns:200px 3;
column-gap:20px;
column-rule:2px dashed #ccc;
}
h1{ （跨列大标题）
-moz-column-span:all;(火狐暂时不支持)
-webkit-column-span:all;
column-span:all;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>我是大标题</h1>
<h3>我是第一段内容</h3>
<p>“本”在哪里？徐洪才认为，“本”就是城乡一体化、新兴城镇化过程中一些机制、体制的创新，比如户籍制度、社会保障体制改革、土地制度改革。</p>
<h3>我是第二段内容</h3>
<p>四线城市的土地是充足的，但人口流入少，需求没那么旺盛，所以房地产就有库存问题，而以下城市需求很旺盛，但土地供应不足，供求矛盾很突出。一线城市集中了教育、医疗等资源，还有就业机会。所以人口蜂拥而至。</p>
<h3>我是第三段内容</h3>
<p>徐洪才指出，从农村到三、四线城市到二线城市再到大城市，形成一个梯形发展的格局。将来还会形成大量人口向一线城市涌进，大城市的矛盾会越来越尖锐，大城市病会越来越突出。</p>
<h3>我是第四段内容</h3>
<p>“这些制度建立好了，大家就没必要往大城市跑了。中国一线城市高房价的病根就在这儿。但这个改革是一个漫长的过程。”徐洪才坦言。</p>
</div>
</body>
</html>
- 上一篇 »CSS3多列布局与伸缩布局
- 下一篇 »css3流动布局