本文介绍了CSS3的多列布局模块，该模块简化了创建多列布局的过程，提供了更好的浏览器兼容性和灵活性。文章详细讲解了列数、列宽、列间隙等属性，并通过多个示例展示了其用法，包括旧方法与新方法的对比，以及额外的特性。虽然存在浏览器支持限制，但借助多列布局生成器和JavaScript备份方案，开发者可以更好地应用这一技术。
多列布局css3
引入了多列布局模块，以帮助我们仅使用CSS3即可轻松快速地创建列。 在本教程中，我将看一下它的一些属性，并通过一系列示例对其进行演示。
介绍
过去尝试使用CSS创建多列的任何人都已经知道这种布局已经可以实现很长时间了。 但是，这通常导致使用骇客技术和浮动广告。 通常，这不是很费时，而且绝对不是最容易创建的布局。 事实是，到目前为止，使用CSS创建多个列一直是一个非常尴尬的过程。 多列布局模块提供了更大的灵活性，并可以控制以前CSS方法。
新方法是对当前CSS 盒模型的扩展，它允许内容从一列运行到另一列，并使其易于适应不同的查看设备和动态数据。
浏览器支持
好的，因此在对这个新模块感到兴奋之前，重要的是要了解哪些浏览器支持该模块 ，要使用的前缀以及一些浏览器限制。
支持的浏览器
- IE10 +
- Firefox 5+
- Chrome12+
- Safari 3.2+
- Opera 11.1+
Chrome和Safari均使用“ -webkit-”前缀。 Firefox使用'-moz-'前缀。 Opera和IE支持所有属性，而无需前缀。 出于某种原因，Chrome，Safari和Firefox不支持中断后或列填充属性，而Safari和Firefox不支持列跨度。 话虽如此，我确信这些属性将很快在将来的更新中可用。
一个简单的例子
在我们研究多列布局模块中使用的属性之前，我将向您展示一个简单的示例，以帮助您理解它的工作原理。
这是列的呈现方式的预览：
首先，此示例的html非常简单。 我们只需要创建一个带有“列”类和一些lorem ipsum虚拟文本的div。
<div class="columns"> <p>Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscing enim mid ut. Enim amet, a ac mauris vut porttitor risus integer elit, dis odio sed pulvinar ridiculus sit. Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscing enim mid ut. Enim amet, a ac mauris vut porttitor risus integer elit, dis odio sed pulvinar</p>
</div>多列布局模块在CSS中非常容易描述和理解。 这是一个例子：
.columns{
column-count: 4;
column-gap: 10px;
}首先，我们使用“ column-count”来指示需要多少列（在此示例中，我使用了4个）。
然后，我们说我们希望装订线（列之间的间隙）有多大。 在这种情况下，我使用了10px。
通过添加这些属性，它允许我们的lorem ipsum虚拟文本在4列之间流动。 上手确实如此简单 。 到现在，您应该开始了解它的使用有多么简单。
CSS属性
让我们更详细地了解可以在多列布局模块中找到的一些属性。
列数和宽度
设置列数或宽度对于多列布局内容很重要。 列应使用'column-width'或'column-count'来设置，但绝不能一起使用。 这两个属性默认情况下均设置为“自动”。
列宽
“列宽”与锡上的含义完全相同。 它允许您为列指定固定宽度。 可以使用px，ems等以标准方式进行此宽度的测量。根据您为列宽输入的内容，它可以变化，并且可以略微变宽或变窄以适合可用空间。 如果将此属性设置为“自动”，则意味着列的宽度将由其他属性（例如以下属性）决定。
值选项column-width: (length) | auto; column-width: (length) | auto;
列数
如果您希望将布局拆分为多个指定的列，那么这就是您要选择的属性。 通过设置此值，可以将内容分为所需的列数。 如果将此属性设置为'auto'，则意味着数字列将由其他属性（例如'column-width'）决定。
值选项column-count: (number of columns) | auto; column-count: (number of columns) | auto;
列
“列”实际上是一种速记属性，可让您设置“列宽”和“列数”。 这是您可以与“列”关联的视图有效值：
columns: 12em; /* column-width: 12em; column-count: auto */
columns: auto 12em; /* column-width: 12em; column-count: auto */
columns: 2; /* column-width: auto; column-count: 2 */
columns: 2 auto; /* column-width: auto; column-count: 2 */
columns: auto; /* column-width: auto; column-count: auto */
columns: auto auto; /* column-width: auto; column-count: auto */列间隙
“列间距”使我们有机会在每个列之间添加一个空间，并为内容提供了呼吸的空间。 我们使用标准CSS测量来指定间隙的宽度。 您指定的间隙宽度不能为负。
值选项column-gap: (length) | normal; column-gap: (length) | normal;
列规则
“列规则”有效地将边界置于“列空白”的中间。 因此，要启用此功能，必须指定“列间隙”宽度，该宽度与列规则相同或更大。 列规则还具有几个单独的子属性以及速记版本。 此速记版本的工作方式与速记“ border”属性的工作方式相同。 您可以在下面看到此内容：
column-rule-width:1px;
column-rule-style: solid;
column-rule-color: #000;
column-rule: 1px solid #000; /* This is the shorthand version */列跨度
“列跨度”使我们可以跨所有列。 如果我们以前面的简单示例为例，并在内容中添加h1标题，则可以通过向其添加column-span:all轻松获得此h1标签以覆盖整个4列。 看一下这个演示：
h1{
column-span: all;
} 值选项column-span: all | none; column-span: all | none;
列填充
'column-fill'属性为我们提供了两个控件，用于设置如何在各列之间平衡内容量。 如果设置为“ balance”，则色谱柱长度的变化将最小化，并且所有长度将尽可能相等。 如果设置为“自动”，则这些列将按顺序填充，并且（例如）可能导致4列中的第4列的内容少于前3列。 如果对此设置了平衡，则它将允许所有4列的高度大致相等。 该特性解决了在内容中留下不希望有的间隙的问题。
溢出
如果内容溢出列，应使用“溢出”控制。 例如，如果主“ columns” div的宽度固定，并且列的内容扩展了该宽度，那么我们可以使用“ overflow”属性控制是显示还是剪切。
在下面的示例中，我们可以看到列溢出了div。 这是由于未在父元素上将溢出设置为“隐藏”。
例子1
创建多列布局的旧方法
我整理了一些示例，您可以在本页顶部下载这些示例。 我这样做是为了展示您如何在不同情况下使用此新模块，以便您可以看到只需更改CSS标记中的一些属性即可轻松更改代码的布局。
第一个示例演示了使用CSS3创建多个列的旧方法。 它是通过在“导航”，“主要内容”和“侧边栏”中添加“ float：left”来实现的。
当然，这可以，您可以达到预期的效果。 但是，灵活性确实受到很大限制。 如果您想添加额外的列或更改布局，则必须依靠添加额外的标记，移动元素，这可能非常乏味。 这个新模块改变了所有这一切。
例子2
新方法
上面的示例显示了用于创建列的新方法。 这次，我没有在主体元素上使用它，而是在“主要内容”中添加了CSS3多列模块，您可以在其中看到内容分为3列。
要更改列数，就像更改数字一样简单。
例子3
其他特性
在最后一个示例中，我一直在主要内容上使用它，但是还添加了一些额外的div以显示如何轻松地更改布局。 我还将“ span：all”添加到较低的“ h1”标记中，以便标题延伸到“所有”列。 最后，我在其中添加了一条规则，包括“ column-rule：1px点缀＃999999;” 到CSS。
值得注意的是，我在示例中还包括了一个javascript后备功能，因此它们可以在尚不支持多列布局模块的浏览器上使用。
后退
与任何新CSS模块一样； 新玩具可以节省我们的时间，但过渡或过渡期有时可能需要一段时间才能达到兼容的跨浏览器兼容性。 我们目前处于中间阶段，其中一些浏览器已经赶上了，有些正在赶上而有些则被抛在后面了。 在此阶段，我们需要为尚不支持的浏览器制定备份计划或备用。 幸运的是， 塞德里克·萨瓦雷塞（Cedric Savarese）提供了一个脚本，该脚本读取我们的新CSS3属性值并使用javascript显示列。 您可以阅读实现方法，并在A List Apart上下载脚本。
多列布局生成器
如果在这个阶段您渴望进入并使用我们今天讨论的某些属性，那么我就介绍了一个快速的“多列生成器”，您可以将它弄乱。 没什么花哨的，但是经过一些摆弄之后，您应该能够掌握“多列布局模块”的基本概念，并能够在自己的项目中开始使用它。
您还可以下载生成的代码，以便能够进一步尝试使用生成器中未包含的其他一些属性。
摘要
这样就结束了CSS3多列布局模块。 希望您现在对如何使用它有了更好的了解。 稍作尝试后，使用起来确实非常简单。 尽管它是新的并且具有一些浏览器支持限制，但是它开始在Internet上流行，并且我相信它成为完全批准并实现CSS模块只是时间问题。
它使我们能够使用CSS探索一些出色的布局。 尝试一下，弄乱它，然后在本教程的顶部下载示例的源文件。 我很想听听您的意见，并考虑这个新模块，请在下面的评论中告诉我。
进一步的链接，阅读和资源
多列布局css3
扫一扫
1984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
