column-count和column-width同时设置

      当column-count和column-width同时设置时,有时候并不能同时满足。比如column-count为3,column-width为200px,而总宽度为500px,显然不能同时并存,此时就只有2行,并且宽度也可能超过200px。

设置列宽度相当于设置的是最小列宽度,浏览器会自动调整column-count,column-gap和column-width之前的平衡,可能与你想要的结果并不一样。当总宽度过宽,会增大列宽度,父类总宽度不够,列数会减少,最后可能只有一列,与不设置列数的结果相同。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,327评论 0 11
  • 浅谈CSS3多列布局 相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: 现在,强大的CSS3为我...
    haileym阅读 2,296评论 0 0
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,616评论 0 6
  • 一、文本多列布局:column (1) column-width:每一栏的宽度 栏的数目:默认随总大小的变...
    littlefish_305a阅读 436评论 0 1
  • 1.多栏布局 使用float或position进行页面布局时,有个比较显著的缺点,元素之间是各自独立的,因此经常底...
    珍珠林阅读 323评论 0 0