CSS中使用列布局是什么？

CSS列布局帮助你分割文本变为列，例如考虑下面的杂志新闻在一个大的文本中，但是我们需要在他们之间使用边界划分为3列，这里HTML5的列布局就有所帮助了

为了实现列布局我们需要指定以下内容
为了实现列布局我们需要指定以下内容

• 我们需要把text划分为多少列

指定列数我们需要使用column-count，对于Chrome和firefox分别需要”webkit”和“moz-column”
XHTML

1 2 3

-moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3;

• 两列之间我们想要多少差距

XHTML
 

1 2 3

-moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:20px;

· 你想在这些列之间画一条线么？如果是，那么多厚呢？
XHTML

1 2 3

-moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ column-rule:6px outset #ff00ff;

以下是完整代码
XHTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<style> .magazine { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3;   -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:20px;   -moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ column-rule:6px outset #ff00ff; } </style>

你可以使用class属性来应用样式到文本
XHTML

1 2 3

<div class="magazine"> Your text goes here which you want to divide in to 3 columns. </div>