CSS3 卡代纳
CSS3 能将文档文本结构设计光学报刊那样的卡代纳产业布局，如下表所示示例:
他们那时而言下列两个特性：
！！Explorer 9及更早 IE 版应用程序不全力支持 column-count 特性
column-count 选定原素如果被拆分的科舞。
column-gap 选定列与列间的间歇
column-rule-style 选定一列间前面板的式样
column-rule-width 选定一列间前面板的宽度
column-rule-color 选定一列间前面板的色调
column-rule 大部份 column-rule-* 特性的缩写
column-span 选定原素要横跨啥列
column-width 选定列的长度
column-count
column-count特性选定了须要拆分的科舞
<style type=“text/css”>
.newspaper {
width: 600px;
border: 1px solid #000000;
column-count: 3;
}
</style>
<body>
<div class=“newspaper”>“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变他们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</div>
</body>
column-gap
column-gap特性选定了卡代纳中列与列间的间歇
<style type=“text/css”>
.newspaper {
width: 600px;
border: 1px solid #000000;
column-count: 3;
column-gap: 40px;
}
</style>
<body>
<div class=“newspaper”>“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变他们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</div>
</body>
column-rule-style
column-rule-style特性选定了列与列间的前面板式样：
他有十个值：
<style type=“text/css”>
.newspaper {
width: 600px;
border: 1px solid #000;
column-count: 3;
column-rule-style: dashed;
}
</style>
<body>
<div class=“newspaper”>“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变他们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</div>
</body>
column-rule-color
column-rule-color属性选定了一列的前面板色调：
<style type=“text/css”>
.newspaper {
width: 600px;
border: 1px solid #000;
column-count: 3;
column-rule-style: dashed;
column-rule-color: #00FFFF;
}
</style>
<body>
<div class=“newspaper”>“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变他们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</div>
</body>
column-rule-width
column-rule-width特性选定了一列的前面板宽度:
他有三个值，也能选定长度
<style type=“text/css”>
.newspaper {
width: 600px;
border: 1px solid #000;
column-count: 3;
column-rule-style: dashed;
column-rule-width: 5px;
}
</style>
<body>
<div class=“newspaper”>“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变他们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</div>
</body>
column-rule
column-rule 特性是一个速记特性设置大部份column-rule-*特性。column-rule 特性设置列间的长度，式样和色调。
语法：column-rule:column-rule-width column-rule-style column-rule-color
<style type=“text/css”>
.newspaper {
width: 600px;
border: 1px solid #000;
column-count: 3;
column-rule: 4px dotted #0168B7;
}
</style>
<body>
<div class=“newspaper”>“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变他们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</div>
</body>
