列间距column-gap

column-gap主要用来设置列与列之间的间距,其语法规则如下:

column-gap: normal || <length>

取值说明

属性值

属性值说明

normal

默认值,默值为1em(如果你的字号是px,其默认值为你的font-size值)。

<length>

此值用来设置列与列之间的距离,其可以使用px,em单位的任何整数值,但不能是负值。

例如:将内容分三列显列,列与列之间的间距为2em,实现代码为:

column-count: 3;
column-gap: 2em;

任务

在CSS编辑器第13-17行输入正确代码,将内容列与列之间的间距设置为3em。(注意:考虑浏览器的兼容性)效果如下图所示:

<!doctype www.dztcsd.com/html>
<html>
<head>
<meta charset="utf-8">
<title>列间距column-gap</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="columns">
  <h2>我要分列显示</h2>
  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。对于文本的多列布局,我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在Web页面上实现文本的多列布局,正如下图所示。</p>
  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。对于文本的多列布局,我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在Web页面上实现文本的多列布局,正如下图所示。</p>
  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。对于文本的多列布局,我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在Web页面上实现文本的多列布局,正如下图所示。</p>
</div>
</body>
</html>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值