<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3创造3列</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body {
font: 12px "宋体";
margin: 20px;
}
h1 {
font-size: 24px;
font-weight: normal;
}
.col {
-moz-column-count:3;
-moz-column-width:140px;
-moz-column-gap:20px;
-moz-column-rule:1px solid #333;
-webkit-column-count:3;
-webkit-column-width:140px;
-webkit-column-gap:20px;
-webkit-column-rule:1px solid #333;
column-count:3;
column-width:140px;
column-gap:20px;
column-rule:1px solid #333;
background:#FEF4D1;
}
</style>
</head>
<body>
<h1>Who is Andy</h1>
<div class="col">
<p>Andy is the Managing Director of Clearleft. He also goes by the title of User Experience Director depending what mood he’s in. Andy is the author of CSS Mastery, curates the dConstruct and UX London events and is responsible for Silverbackapp, our low cost usability testing application for the Mac. Richard is a founding partner and the production director for Clearleft. He has been designing websites and web applications since the birth of the commercial web, over twelve years ago. Richard leads the user experience team at Clearleft, pioneering innovative approaches to designing fantastic experiences for clients and their customers. Jeremy is a hugely experienced developer specialising in XHTML, CSS, Javascript and PHP-driven solutions. Jeremy is technical director at Clearleft.</p>
</div>
</body>
</html>
column-count分列的列数
column-width每列的列宽
column-gap设置列之间的间隔宽度
column-rule设置列间隔线的设置
实际操作发现，IE8 完全不支持 opera分成了9列，只能算他不支持
firefox chrome safari均很好的支持，另外发现，如果容器的宽度不够，也就是把浏览器的大小调整，当容器不够容纳3列的列宽之和，那么就变成2列，如果再小就变成1列
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
