章节
问答
课签
笔记
评论
占位
占位

CSS3 多列布局——column-width

column-width的使用和CSS中的width属性一样,不过不同的是,column-width属性在定义元素列宽的时候,既可以单独使用,也可以和多列属性中其他属性配合使用。其基本语法如下所示 ;

column-width: auto | <length>

取值说明

属性值

说明

auto

如果column-width设置值为auto或者没有显式的设置值时,元素多列的列宽将由其他属性来决定,比如前面的示例就是由列数column-count来决定。

<length>

使用固定值来设置元素列的宽度,其主要是由数值和长度单位组成,不过其值只能是正值,不能为负值。

任务

在编辑器的第7行输入正确代码,分为3栏,每栏的内容宽度设置为200px;(注:一定要考虑到浏览器的兼容性) 具体效果见下图:

温馨提示:案例的效果如上图所示才算顺利通关,否则请再学习一遍本节的知识点!

?不会了怎么办
||
1
2
<!doctype html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
.columns {
padding: 5px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

已采纳回答 / 慕尼黑1105227
设置成300px 就会有变化  设置成100px 也没变化 说明 浏览器有个默认的设置 太小了不行 

最赞回答 / 爱上慕婉清6262634
column-width 设置的宽度是最小宽度  假设div宽度是900,设置的column-width是200,若此时未指定column-count,则按照每列200宽度开始将div铺满,但是我们会发现4列后剩下宽度不够200了,这个时候进行内容自适应,即column-count为4,将900宽度均分为4列,每列宽度会大于200。假设div宽度是900,设置的column-width是200,此时指定column-count为3,则按照column-count,将900宽度均分为3列,每列宽度会大于20...

最新回答 / 冷眼看尽繁华丿
可视窗口的问题。这里的宽度太小,每列200px的话,它会容纳不下里面的内容。你把代码放到自己的编辑里,然后在预览。

最新回答 / 罗曼男爵
浏览器需要兼容写法,需要加浏览器前缀吧

最赞回答 / gulang6839
遇到同样的问题了?等待大神解析~

+ 我来回答 回答最高可+2积分

最新回答 / ruteamama
亲、都错光了

+ 我来回答 回答最高可+2积分

+ 我来回答 回答最高可+2积分

最新回答 / w3cplus
你这个存在一个问题,你的容器设置了总宽度是900px,而你又分为五栏,每栏的宽度为500px。那么这样的数据计算公式,你一下就懂了。http://codepen.io/airen/pen/wuCvn

+ 我来回答 回答最高可+2积分
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言