CSS3基础（010_多列布局）

作者：kingwign009 | 来源：互联网 | 2023-08-11 15:54

原始网址：http:www.w3schools.comcsscss3_multiple_columns.asp翻译：CSS3多列（CSS3MultipleColumns）

原始网址：http://www.w3schools.com/css/css3_multiple_columns.asp

翻译：

CSS3 多列（CSS3 Multiple Columns）

CSS3 多列布局（CSS3 Multi-column Layout）

CSS3 多列布局对文本的多列定义来说是很容易的，它的效果如同报纸：


<html>
<head>
<style>
.w3-light-grey {
 background-color: #f1f1f1 !important;
 color: #000 !important;
}

.w3-padding-jumbo {
 padding: 32px 64px !important;
}

.w3-center {
 text-align: center !important;
}

.newspaper {
 -moz-column-count: 3;
 -moz-column-gap: 40px;
 -moz-column-rule: 1px solid lightgrey;
 column-count: 3;
 column-gap: 40px;
 column-rule: 1px solid lightgrey;
 padding: 15px;
}

.w3-large {
 font-size: 18px !important;
}

body {
 font-family: Verdana, sans-serif;
 font-size: 15px;
 line-height: 1.5;
}
style>
head>
<body>
    <div style="border: 1px solid #ddd">
        <div class="w3-light-grey w3-padding-jumbo w3-center">
            <h3>Daily Pingh3>
        div>
        <p class="newspaper">
            <span class="w3-large">Lorem ipsumspan><br> dolor sit amet,
            consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
            ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
            veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
            ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
            in hendrerit in vulputate velit esse molestie consequat, vel illum
            dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
            odio dignissim qui blandit praesent luptatum zzril delenit augue duis
            dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
            eleifend option congue nihil imperdiet doming id quod mazim placerat
            facer possim assum.
        p>
    div>
body>
html>

Browser Support

表格里的数字代表对 CSS3 属性全面支持的各浏览器的第一个版本号。
数字之后跟从 -webkit- 或 -moz- 指定带前缀工作的第一个版本号。

属性（Property）
column-count	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-gap	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-rule	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-rule-color	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-rule-style	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-rule-width	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-span	50.0 4.0 -webkit-	10.0	Not supported	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1
column-width	50.0 4.0 -webkit-	10.0	2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1

CSS3 多列属性（CSS3 Multi-column Properties）

本章，你将学习到以下多列属性：

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

CSS3 创建多列（CSS3 Create Multiple Columns）

column-count 属性指定元素应该被分割的列数。
下列示例将

元素内的文本分割为 3 列：

div {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
}


<html>
<head>
<style>
.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
}
style>
head>
<body>
    <p>
        <b>Note:b> Internet Explorer 9, and earlier versions, does not
        support the column-count property.
    p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.div>

body>
html>

CSS3 指定列间距（CSS3 Specify the Gap Between Columns）

column-gap 属性指定列间距。
下列示例指定列间距为 40 像素：

div {
 -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
 -moz-column-gap: 40px; /* Firefox */
 column-gap: 40px;
}


<html>
<head>
<style>
.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
 -moz-column-gap: 40px; /* Firefox */
 column-gap: 40px;
}
style>
head>
<body>
    <p>
        <b>Note:b> Internet Explorer 9, and earlier versions, does not
        support the column-gap property.
    p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.div>
body>
html>

CSS3 列规则（CSS3 Column Rules）

column-rule-style 属性指定列之间的样式规则：

div {
 -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
 -moz-column-rule-style: solid; /* Firefox */
 column-rule-style: solid;
}


<html>
<head>
<style>
.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
 -moz-column-gap: 40px; /* Firefox */
 column-gap: 40px;
 -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
 -moz-column-rule-style: solid; /* Firefox */
 column-rule-style: solid;
}
style>
head>
<body>
    <p>
        <b>Note:b> Internet Explorer 9, and earlier versions, does not
        support the column-rule-style property.
    p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.div>
body>
html>

column-rule-width 属性指定列之间的宽度规则：

div {
 -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
 -moz-column-rule-width: 1px; /* Firefox */
 column-rule-width: 1px;
}


<html>
<head>
<style>
.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
 -moz-column-gap: 40px; /* Firefox */
 column-gap: 40px;
 -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
 -moz-column-rule-style: solid; /* Firefox */
 column-rule-style: solid;
 -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
 -moz-column-rule-width: 1px; /* Firefox */
 column-rule-width: 1px;
}
style>
head>
<body>
    <p>
        <b>Note:b> Internet Explorer 9, and earlier versions, does not
        support the column-rule-width property.
    p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.div>
body>
html>

column-rule-color 属性指定列之间的颜色规则：

div {
 -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
 -moz-column-rule-color: lightblue; /* Firefox */
 column-rule-color: lightblue;
}


<html>
<head>
<style>
.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
 -moz-column-gap: 40px; /* Firefox */
 column-gap: 40px;
 -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
 -moz-column-rule-style: solid; /* Firefox */
 column-rule-style: solid;
 -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
 -moz-column-rule-width: 1px; /* Firefox */
 column-rule-width: 1px;
 -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
 -moz-column-rule-color: lightblue; /* Firefox */
 column-rule-color: lightblue;
}
style>
head>
<body>
    <p>
        <b>Note:b> Internet Explorer 9, and earlier versions, does not
        support the column-rule-color property.
    p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.div>
body>
html>

column-rule 属性是以上所有 column-rule-* 属性的简写属性。
下列示例设置列之间的宽度、式样、颜色规则：

div {
 -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
 -moz-column-rule: 1px solid lightblue; /* Firefox */
 column-rule: 1px solid lightblue;
}


<html>
<head>
<style>
.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
 -moz-column-gap: 40px; /* Firefox */
 column-gap: 40px;
 -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
 -moz-column-rule: 1px solid lightblue; /* Firefox */
 column-rule: 1px solid lightblue;
}
style>
head>
<body>
    <p>
        <b>Note:b> Internet Explorer 9, and earlier versions, does not
        support the column-rule property.
    p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.div>
body>
html>

指定元素具备内边距的列数（Specify How Many Columns an Element Should Span）

column-span 属性指定元素具备内边距的列数。
下列示例指定

元素的所有列均具备内边距：

/* 注意：Firefox 不支持该属性 */
h2 {
 -webkit-column-span: all; /* Chrome, Safari, Opera */
 column-span: all; /* 语法：column-span: 1|all|initial|inherit; */
}


<html>
<head>
<style>
.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
 -moz-column-gap: 40px; /* Firefox */
 column-gap: 40px;
 -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
 -moz-column-rule: 1px solid lightblue; /* Firefox */
 column-rule: 1px solid lightblue;
}

h2 {
 -webkit-column-span: all; /* Chrome, Safari, Opera */
 column-span: all;
}
style>
head>
<body>
    <p>
        <b>Note:b> Firefox and Internet Explorer 9 (and earlier versions) do
        not support the column-span property.
    p>
    <div class="newspaper">
        <h2>Lorem Ipsum Dolor Sit Ameth2>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
        volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
        ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
        molestie consequat, vel illum dolore eu feugiat nulla facilisis at
        vero eros et accumsan et iusto odio dignissim qui blandit praesent
        luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        Nam liber tempor cum soluta nobis eleifend option congue nihil
        imperdiet doming id quod mazim placerat facer possim assum.
    div>
body>
html>

指定列宽（Specify The Column Width）

column-width 属性对列指定建议性的、可选的宽度。
下列示例对列指定建议性的、可选的宽度为 100px：

div {
 -webkit-column-width: 100px; /* Chrome, Safari, Opera */
 -moz-column-width: 100px; /* Firefox */
 column-width: 100px;
}


<html>
<head>
<style>
.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 -webkit-column-width: 100px; /* Chrome, Safari, Opera */
 -moz-column-width: 100px; /* Firefox */
 column-width: 100px;
}
style>
head>
<body>
    <p>
        <b>Note:b> Internet Explorer 9, and earlier versions, does not
        support the column-width property.
    p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.div>
body>
html>

推荐阅读

hash
Activity跳转动画无缝衔接

Activity跳转动画无缝衔接 ... [详细]

蜡笔小新 2024-11-27 11:40:35
hash
探索HTML5：十五个关键的新特性

本文深入探讨了HTML5中十五个重要的新特性，为开发者提供了详细的指南。 ... [详细]

蜡笔小新 2024-11-26 19:09:22
schema
Android 自定义 Spinner 下拉框样式

本文介绍了如何通过创建自定义 XML 文件来修改 Android 中 Spinner 的项样式，包括颜色和大小的调整。 ... [详细]

蜡笔小新 2024-11-25 01:39:41
jsp
拖拉切割直线

拖拉切割直线 ... [详细]

蜡笔小新 2024-11-27 19:20:38
go
如何在 VS Code 中调试 Vue 项目

本文详细介绍了如何通过配置 Chrome 和 VS Code 来实现对 Vue 项目的高效调试。步骤包括启用 Chrome 的远程调试功能、安装 VS Code 插件以及正确配置 launch.json 文件。 ... [详细]

蜡笔小新 2024-11-27 11:52:35
schema
解决MenuItem中通过app:actionLayout使用Switch时出现的空指针异常问题

在Android应用开发中，当在MenuItem中通过app:actionLayout属性使用Switch控件时，可能会遇到空指针异常的问题。本文将探讨该问题的原因及解决方案。 ... [详细]

蜡笔小新 2024-11-25 21:37:06
schema
浅谈Android五大布局——LinearLayout、FrameLayout和AbsoulteLa

为什么80%的码农都做不了架构师？Android的界面是有布局和组件协同完成的，布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。 ... [详细]

蜡笔小新 2024-11-24 16:56:56
schema
Web网络基础

目录儿1使用HTTP协议访问Web2HTTP的诞生2.1因特网的起源2.2互联网、因特网与万维网2.3万维网与HTTP3网络基础TCPIP3.1TCPIP协议族3.2TCPIP的分 ... [详细]

蜡笔小新 2024-11-27 18:39:10
schema
Xamarin.Forms 开发技巧：绝对布局与定时器的应用

本文详细探讨了在 Xamarin.Forms 中使用 AbsoluteLayout 进行精确布局的方法，以及如何利用 Device.StartTimer 实现定时任务。通过具体的代码示例，帮助开发者更好地理解和应用这些功能。 ... [详细]

蜡笔小新 2024-11-27 14:13:25
install
Cadence SPB 16.5 安装指南与注意事项

本文提供了详细的 Cadence SPB 16.5 安装步骤，包括环境配置、安装过程中的关键步骤以及常见问题的解决方案。适合初次安装或遇到问题的技术人员参考。 ... [详细]

蜡笔小新 2024-11-27 09:43:24
jsp
深入解析Android Activity生命周期

本文详细探讨了Android中Activity的生命周期，通过实例代码和详细的步骤说明，帮助开发者更好地理解和掌握Activity各个阶段的行为。 ... [详细]

蜡笔小新 2024-11-27 03:28:32
jsp
JSP基础入门指南

本文介绍了JSP的基本概念、常用标签及其功能，并通过示例详细说明了如何在JSP页面中使用Java代码。 ... [详细]

蜡笔小新 2024-11-26 18:52:31
jsp
Html.Partial vs Html.RenderPartial in ASP.NET MVC3

尽管已经查阅了相关说明，但关于Html.Partial和Html.RenderPartial在ASP.NET MVC3中的使用，我仍然感到困惑。 ... [详细]

蜡笔小新 2024-11-26 17:38:37
jsp
Java实现实时更新的日期与时间显示

本文介绍了如何使用Java编程语言来创建一个能够实时更新显示系统当前日期和时间的小程序。通过使用Swing库中的组件和定时器功能，可以实现界面友好且功能强大的时间显示应用。 ... [详细]

蜡笔小新 2024-11-25 12:55:33
jsp
深入解析Unity3D游戏开发中的音频播放技术

在游戏开发中，音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频，包括背景音乐和效果音效，并介绍实现这些功能的具体步骤。 ... [详细]

蜡笔小新 2024-11-22 21:05:22

kingwign009

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章