css3 多列布局记
css3 多列布局
多列布局属性：
columns：column-widht和column-count的缩写。
column-width:定义每列列宽度。
column-count:定义分列列数。
column-gap:定义列间距。
column-rule:定义列边框。
column-rule-width:定义列边框的宽度。
column-rule-style:定义列边框的样式。
column-rule-color:定义列边框的颜色。
column-span:定义子元素跨列效果。
column-fill:控制每列列高效果。
<!DOCTYPE html>
<html lang="en" xmlns="http:// www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
-moz-column-gap:20px;
-webkit-column-gap:20px;
column-gap:20px;
-moz-column-rule:double;
-webkit-column-rule:double;
column-rule:double;
}
h1{
-moz-column-span:all;
-webkit-column-span:all;
column-span:all;
text-align:center;
border-bottom:double;
}
</style>
</head>
<body>
<h1>淮阴侯韩信</h1>
<p>后数日，蒯通复说曰：“夫听者事之候也，计者事之机也，听过计失而能久安者，鲜矣。听不失一二者，不可乱以言；计不失本末者，不可纷以辞。夫随厮养之役者，失万乘之权；守儋石之禄者，阙卿相之位。故知者决之断也，疑者事之害也，审豪氂之小计，遗天下之大数，智诚知之，决弗敢行者，百事之祸也。故曰‘猛虎之犹豫，不若蜂虿之致螫；骐骥之局躅，不如驽马之安步；孟贲之狐疑，不如庸夫之必至也；虽有舜禹之智，吟而不言，不如瘖聋之指麾也’。此言贵能行之。夫功者难成而易败，时者难得而易失也。时乎时，不再来。原足下详察之。”韩信犹豫不忍倍汉，又自以为功多，汉终不夺我齐，遂谢蒯通。蒯通说不听，已详狂为巫。</p>
</body>
</html>
