CSS3中多列布局详解

本文介绍了CSS3中的多列布局方法,包括column-count(列数)、column-width(列宽)、column-gap(间距)、column-rule(边框样式)和column-span(跨列)等属性,以及通过示例展示了如何使用这些属性实现报纸风格的多列布局并解决先前布局问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

多列布局

概念:在CSS3之前,想要设计类似报纸那样的多列布局,有两种方式可以实现:一种是"浮动布局",另一种是“定位布局”。

这两种方式都有缺点:浮动布局比较灵活,但不容易控制;定位布局可以精准定位,但是不够灵活

为了解决这多列布局的难题,CSS3新增了一种布局方式-多列布局。多列布局提供了一种多列组织内容的方式,可以简单的实现类似报纸格式的布局。

在CSS3中,多列布局常用的属性有以下属性

属性值说明
column-count定义元素的列数
column-width定义每一列的宽度
column-gap定义两列之间的距离
column-rule定义两列之间的边框样式
column-span定义跨列样式

列数:column-count

概念:column-count属性用来定义多列布局的列数

语法:

column-count:auto|number;

属性值

属性值说明
auto默认值,表示列数由column-width属性决定
number表示自动划分几列

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列数</title>
		<style>
			div{
				width:400px;
				padding:10px;
				border:1px solid blueviolet;
				column-count:2;
			}
			h1{
				height:60px;
				line-height:60px;
				text-align:center;
				background-color:rgba(83,199,86,0.6);
			}
			p{
				font-family:"仿宋";
				font: size:16px;
			}
		</style>
	</head>
	<body>
		<div>
		<h1>顾城</h1>
		<p>命运不是风来回吹,命运是大地,走到哪里你都在命中。从叶到花,或从花到叶,于科研是一个过程,而于生命自身则永远只在此刻。花和叶都是一种记忆方式,果子同时也是种子。生命是闪耀的此刻,不是过程,就像芳香不需要道路一样。诗是树叶,比秋天短,比世界长。</p>
		<h1>史铁生</h1>
		<p>于是得有一种道路,你愿2意为之生也愿意为之死,愿意为之累,愿意在它的引力下耗尽生命。不是强言不悔,是清醒地从命。死亡来临时有一个仪式,灰和土都好,看往日轻轻地蒸发,但同时明白,有什么东西沉沉地还在。不求还在现实中,但愿还在美丽的位置上。于爱者而言,爱情怎么会是悲剧?对春天而言,秋天是它的悲剧吗?</p>
		</div>
	</body>
</html>

运行结果
在这里插入图片描述

列宽:column-width

概念:column-width属性用来定义多列布局中每一列的宽度

语法:

column-width:auto|number;

属性值

属性值说明
auto默认值,表示列数由column-count属性决定
number表示每列的宽度。值为正数,否则属性会无效。单位可以为px、em和百分比等

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列宽</title>
		<style>
			div{
				width:400px;
				padding:10px;
				border:1px solid blueviolet;
				/* 每一列宽度为100px */
				column-width:100px;
			}
			h1{
				height:60px;
				line-height:60px;
				text-align:center;
				background-color:rgba(83,199,86,0.6);
			}
			p{
				font-family:"仿宋";
				font: size:16px;
			}
		</style>
	</head>
	<body>
		<div>
		<h1>顾城</h1>
		<p>命运不是风来回吹,命运是大地,走到哪里你都在命中。从叶到花,或从花到叶,于科研是一个过程,而于生命自身则永远只在此刻。花和叶都是一种记忆方式,果子同时也是种子。生命是闪耀的此刻,不是过程,就像芳香不需要道路一样。诗是树叶,比秋天短,比世界长。</p>
		<h1>史铁生</h1>
		<p>于是得有一种道路,你愿2意为之生也愿意为之死,愿意为之累,愿意在它的引力下耗尽生命。不是强言不悔,是清醒地从命。死亡来临时有一个仪式,灰和土都好,看往日轻轻地蒸发,但同时明白,有什么东西沉沉地还在。不求还在现实中,但愿还在美丽的位置上。于爱者而言,爱情怎么会是悲剧?对春天而言,秋天是它的悲剧吗?</p>
		</div>
	</body>
</html>

运行结果
在这里插入图片描述

间距:column-gap

概念:column-gap属性用于定义元素列与列之间的间距大小

语法:

column-gap:normal|number;

属性值

属性值说明
normal默认值,表示浏览器默认长度值
number定义列之间的间隔大小。属性值必须是正数。单位可以是px、em和百分比等

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列宽</title>
		<style>
			div{
				width:400px;
				padding:10px;
				border:1px solid blueviolet;
				/* 定义列数目为2*/
				column-count:2;
				/* 定义列间距为100px */
				column-gap:100px;
			}
			h1{
				height:60px;
				line-height:60px;
				text-align:center;
				background-color:rgba(83,199,86,0.6);
			}
			p{
				font-family:"仿宋";
				font: size:16px;
			}
		</style>
	</head>
	<body>
		<div>
		<h1>顾城</h1>
		<p>命运不是风来回吹,命运是大地,走到哪里你都在命中。从叶到花,或从花到叶,于科研是一个过程,而于生命自身则永远只在此刻。花和叶都是一种记忆方式,果子同时也是种子。生命是闪耀的此刻,不是过程,就像芳香不需要道路一样。诗是树叶,比秋天短,比世界长。</p>
		<h1>史铁生</h1>
		<p>于是得有一种道路,你愿2意为之生也愿意为之死,愿意为之累,愿意在它的引力下耗尽生命。不是强言不悔,是清醒地从命。死亡来临时有一个仪式,灰和土都好,看往日轻轻地蒸发,但同时明白,有什么东西沉沉地还在。不求还在现实中,但愿还在美丽的位置上。于爱者而言,爱情怎么会是悲剧?对春天而言,秋天是它的悲剧吗?</p>
		</div>
	</body>
</html>

运行结果
在这里插入图片描述

边框:column-rule

概念:column-rule属性定义列与列之间的边框样式

语法:

column-rule:width style color;

属性值

属性值说明
width定义边框的宽度
style定义边框的样式
color定义边框的颜色

column-rule属性是一个复合属性,由3个子属性组成。

  • column-rule-width:定义边框的宽度。
  • column-rule-style:定义边框的样式。
  • column-rule-color:定义边框的颜色。

说明:用法跟border属性基本上是一样的

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			div{
				width:400px;
				padding:10px;
				border:1px solid orange;
				/* 定义列数目为2*/
				column-count:2;
				/* 定义列间距为100px */
				column-gap:100px;
				/* 定义列之间的边框样式 */
				column-rule:1px solid blueviolet;
			}
			h1{
				height:60px;
				line-height:60px;
				text-align:center;
				background-color:rgba(83,199,86,0.6);
			}
			p{
				font-family:"仿宋";
				font: size:16px;
			}
		</style>
	</head>
	<body>
		<div>
		<h1>顾城</h1>
		<p>命运不是风来回吹,命运是大地,走到哪里你都在命中。从叶到花,或从花到叶,于科研是一个过程,而于生命自身则永远只在此刻。花和叶都是一种记忆方式,果子同时也是种子。生命是闪耀的此刻,不是过程,就像芳香不需要道路一样。诗是树叶,比秋天短,比世界长。</p>
		<h1>史铁生</h1>
		<p>于是得有一种道路,你愿2意为之生也愿意为之死,愿意为之累,愿意在它的引力下耗尽生命。不是强言不悔,是清醒地从命。死亡来临时有一个仪式,灰和土都好,看往日轻轻地蒸发,但同时明白,有什么东西沉沉地还在。不求还在现实中,但愿还在美丽的位置上。于爱者而言,爱情怎么会是悲剧?对春天而言,秋天是它的悲剧吗?</p>
		</div>
	</body>
</html>

运行结果
在这里插入图片描述

跨列:column-span

概念:column-span属性来实现多列布局的跨列效果

语法:

column-span:none|all;

属性值

属性值说明
none表示元素不跨多个列。
all表示元素横跨所有列。元素出现之前,出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的区块格式化上下文。

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跨列</title>
		<style>
			div{
				width:400px;
				padding:10px;
				border:1px solid orange;
				column-count:2;
				column-gap:100px;
				column-rule:1px solid blueviolet;
			}
			h1{
				height:60px;
				line-height:60px;
				text-align:center;
				background-color:rgba(83,199,86,0.6);
				/* 该元素横跨所有列 */
				column-span:all;
			}
			p{
				font-family:"仿宋";
				font: size:16px;
			}
		</style>
	</head>
	<body>
		<div>
		<h1>顾城</h1>
		<p>命运不是风来回吹,命运是大地,走到哪里你都在命中。从叶到花,或从花到叶,于科研是一个过程,而于生命自身则永远只在此刻。花和叶都是一种记忆方式,果子同时也是种子。生命是闪耀的此刻,不是过程,就像芳香不需要道路一样。诗是树叶,比秋天短,比世界长。</p>
		<h1>史铁生</h1>
		<p>于是得有一种道路,你愿2意为之生也愿意为之死,愿意为之累,愿意在它的引力下耗尽生命。不是强言不悔,是清醒地从命。死亡来临时有一个仪式,灰和土都好,看往日轻轻地蒸发,但同时明白,有什么东西沉沉地还在。不求还在现实中,但愿还在美丽的位置上。于爱者而言,爱情怎么会是悲剧?对春天而言,秋天是它的悲剧吗?</p>
		</div>
	</body>
</html>

运行结果
在这里插入图片描述
在该实例中,column-span:all;属性使得标题h1跨越所有的列。

### Anaconda 安装教程 #### 一、安装 Anaconda配置环境变量 为了确保 Anaconda 正常工作,在安装过程中需要注意勾选添加路径选项,这一步骤对于后续命令行工具的正常使用至关重要[^3]。 ```bash # 如果在安装时未选择添加路径,则可以通过手动设置环境变量来解决 export PATH="/path/to/anaconda/bin:$PATH" ``` #### 二、验证安装是否成功 完成安装后,可通过启动 Anaconda Navigator 或者在命令提示符中运行 `conda --version` 来确认安装情况。如果显示 Conda 的版本号则表示安装无误。 ```bash conda --version ``` ### 使用清华大学镜像加速软件包下载 #### 三、配置 Conda 使用清华大学镜像源 由于官方仓库可能速度较慢,建议修改默认的 Conda 源为清华大学开源软件镜像站提供的国内镜像地址,从而提高依赖项获取效率[^1]。 ```bash # 添加清华镜像作为优先级最高的渠道 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ # 显示完整的 URL 地址以便于调试 conda config --set show_channel_urls yes ``` #### 四、创建并激活 TensorFlow 所需虚拟环境 考虑到不同 Python 版本之间的兼容性差异,推荐专门为 TensorFlow 创建独立的工作空间,并指定合适的 Python 解释器版本[^2]。 ```bash # 基于特定Python版本建立新的Conda环境 conda create -n tensorflow python=3.6 anaconda # 切换至刚创建好的环境中去 conda activate tensorflow ``` #### 五、利用 Pip 和 Conda 结合方式高效部署 TensorFlow 及其他库 除了通过 Conda 管理基础设施外,还可以借助 PyPI 上丰富的第三方扩展资源进一步完善开发平台建设;同样地,这里也提倡采用本地化存储节点以加快网络传输速率[^4]。 ```bash # 运用Pip配合清华简易索引服务器快速加载目标模块 pip install tensorflow-gpu==2.x.y -i https://pypi.tuna.tsinghua.edu.cn/simple ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值