CSS3 多列布局
CSS3 多列布局（Multi-column Layout）
CSS3 多列布局是一种可以让内容分成多个列的布局方式，类似于报纸或杂志的排版。它通过一些新的 CSS 属性来实现，主要包括 column-count、column-width、column-gap、column-rule 等。
基本属性
column-count
设置元素内容分成的列数。
.multi-column {
column-count: 3;
}column-width
设置列的宽度。
.multi-column {
column-width: 200px;
}column-gap
设置列之间的间距。
.multi-column {
column-gap: 20px;
}column-rule
设置列之间的分隔线。
.multi-column {
column-rule: 1px solid #000;
}column-span
指定元素跨越的列数。all 值使元素跨越所有列。
.multi-column span {
column-span: all;
}示例
以下是一个使用多列布局的示例，将内容分成三列，并设置列宽、间距和分隔线：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多列布局练习</title>
<style>
.multi-column {
/* 设置列数 */
column-count: 3;
/* 设置列宽 */
column-width: 150px;
/* 设置列间距 */
column-gap: 15px;
/* 设置列边框 */
column-rule: 2px dashed #888;
/* 设置内边距 */
padding: 20px;
}
.multi-column h2 {
/* 列跨列 */
column-span: all;
text-align: center;
}
.multi-column p {
margin: 0 0 1em;
}
</style>
</head>
<body>
<div class="multi-column">
<h2>多列布局练习</h2>
<p>广州是荔枝的主要销售地，也是广东省荔枝主要产区之一，荔枝种植面积占全省七分之一。
阳春三月，本是荔枝花开的季节，近日，记者走访广州增城大型荔枝果场发现，漫山遍野的荔枝树并不像往年那样花团锦簇，不少中晚熟品种的荔枝树上，嫩红的叶子反而比花穗更加抢眼，果场管理人员告诉记者，这正是荔枝“小年”的典型特征。
</p>
<p>据广东省农业科学院果树研究所专家介绍，今年广东荔枝全省总产量预计同比锐减27%-42%，减产幅度远超预期！
其中，大家最爱的桂味、糯米糍等中晚熟优质品种受冲击最狠：
</p>
<p>成花率普遍不足20%，部分粗放管理的果园近乎绝收；
仙进奉等晚熟品种稍好，但产量也仅为去年的40%-50%；
唯一的慰藉：妃子笑、白糖罂等早熟品种成花率约80%，将成为今年荔枝市场的“主力军”。
很多人好奇，好好的荔枝，为啥突然就减产了？专家分析，主要是双重因素叠加导致：
</p>
<p>暖冬+干旱拖后腿
荔枝花芽分化需要累计10℃以下低温180小时以上，但2025年广东冬季平均气温超23℃，“冷量”严重不足；再加上冬春持续干旱，直接阻碍花穗萌发，果树只长叶不开花。
去年“大年”透支元气
2025年是荔枝“超级大年”，广东荔枝大丰产，果树超负荷结果，养分被严重消耗；多数果园采后未及时补肥、修剪，树体恢复缓慢，今年自然没法顺利分化花芽。
除此之外，部分果园管理缺位，也加剧了减产的程度。
减产最直接的影响，就是荔枝价格暴涨！桂味、糯米糍等荔枝传统优质品种市场供给或将极度紧缺，“一果难求”局面恐难避免，价格应声看涨，后续管理仍是关键。据果农预计，今年桂味、糯米糍的零售价可能突破50元/斤，甚至更高，今夏实现“荔枝自由”的成本或将显著上升。</p>
</div>
</body>
</html>实现效果：
在这个示例中：
column-count: 3; 将内容分成三列。
column-gap: 20px; 设置列之间的间距为 20px。
column-rule: 1px solid #000; 设置列之间的分隔线为 1px 的实线，颜色为黑色。
column-span: all; 使标题跨越所有列。
练习题：CSS3 多列布局
目标：创建一个包含多列布局的文章，设置列数、列宽、间距和分隔线，并让标题跨越所有列。
要求：
将文章内容分成四列。
设置列宽为 150px。
设置列之间的间距为 15px。
设置列之间的分隔线为 2px 的虚线，颜色为灰色。
让文章的标题跨越所有列。
参考答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多列布局练习</title>
<style>
.multi-column {
column-count: 4;
column-width: 150px;
column-gap: 15px;
column-rule: 2px dashed #888;
padding: 20px;
}
.multi-column h2 {
column-span: all;
text-align: center;
}
.multi-column p {
margin: 0 0 1em;
}
</style>
</head>
<body>
<div>
<h2>多列布局练习</h2>
<p>请更换此段文字为你自己的内容。你可以写一些介绍、描述或任何你想展示的文字内容。</p>
<p>此处同样请更换为你自己的内容。建议尽量多写一些文字，以便充分展示多列布局的效果。</p>
<p>这里是第三段文字，同样请更换为你自己的内容。多列布局可以使文章更具可读性和美观性。</p>
<p>最后一段文字，请更换为你自己的内容。希望你能够通过这次练习掌握多列布局的使用方法。</p>
</div>
</body>
</html>
毕设系统定制、课程教学、问题1对1远程解答，可联系村长QQ：330168885
需要购买本课才能留言哦~