为了账号安全,请及时绑定邮箱和手机立即绑定

多列布局问题

.columns {

  width: 500px;

  padding: 5px;

  border: 1px solid green;

  margin: 20px auto; 

  -webkit-columns:50px 3;

  -moz-columns:50px 3;

  -o-columns:50px 3;

  -ms-columns:50px 3;

  columns:50px 3;

}

为什么我把列的宽度变为50px没有变化呢,是哪里的原因呢?

正在回答

1 回答

① div宽度500=列宽x+列间距y,(div宽度500-列间距y) ÷ 列数3 ≈ 每列最大宽度z。在宽度500不变的情况下,自定义列宽只要≤每列最大宽度z,就能保持三列的布局;【经本人测试,最大列宽是155px】

② 宽度500不变的情况下,只要自定义列宽≤每列最大宽度z,即只要自定义列宽≤155px,无论你的列宽设置是什么数值,列宽不会发生任何变化;

③ 只有当div宽度或文本内容长度发生变化时,布局才会发生变化。

2 回复 有任何疑惑可以回复我~
#1

安静的学者 提问者

厉害了
2017-08-19 回复 有任何疑惑可以回复我~
#2

安静的学者 提问者

那知道列间距是根据什么变化的吗?
2017-08-19 回复 有任何疑惑可以回复我~
#3

心陌灬琉璃梦 回复 安静的学者 提问者

如果你没有特意去设置列间距的大小,那列间距默认和字号font-size一样大小。
2017-08-19 回复 有任何疑惑可以回复我~
#4

爱上慕婉清6262634 回复 安静的学者 提问者

可通过column-gap设置。column-gap:20px;
2017-10-11 回复 有任何疑惑可以回复我~
查看1条回复

举报

0/150
提交
取消
十天精通CSS3
  • 参与学习       242695    人
  • 解答问题       2623    个

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

进入课程

多列布局问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信