css样式设置为：

div{
background:blanchedalmond;
margin:0 auto;
width:1230px;
-moz-column-width:400px;
-webkit-column-width:400px;

}

在利用column-width属性设置多栏布局是可能会出现这样的情况:每列长度为600px

与设置的样式相悖，出现这种情况的原因是column-gap的最小值为1em即列与列之间的最小距离为16px;当列的长度为400px ，如果将整个div分为3列时，column-gap的值为15px小于16px ,所以整个div不能分为3列，所以整个div分为2列，为了满足div的长度，所以导致每列的长度会变大

利用column-width属性设置多栏布局的更多相关文章

  1. 多栏布局与JS实现瀑布流

    css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决 ...

  2. HTML <img> 标签的 height 和 width 属性

    定义和用法 <img> 标签的 height 和 width 属性设置图像的尺寸. 提示:为图像指定 height 和 width 属性是一个好习惯.如果设置了这些属性,就可以在页面加载时 ...

  3. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  4. IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...

  5. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  6. 006 Android XML 文件布局及组件属性设置技巧汇总

    1.textview 组件文本实现替换(快速实现字符资源的调用) android 应用资源位置在 project(工程名)--->app--->res--->values 在stri ...

  7. 个人经验 - Android的RelativeLayout布局的layout_height属性设置为wrap_content时的坑

    Android的RelativeLayout布局的layout_height属性设置为wrap_content时的坑: 此坑出现的条件: 1.RelativeLayout布局的layout_heigh ...

  8. Android五大布局介绍&属性设置大全

    前言 在进行Android开发中,常常需要用到各种布局来进行UI的绘制,今天我们就来讲下Android开发中最常用的五大布局介绍和相关属性的设置. 目录 Android五大布局介绍&属性设置. ...

  9. 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法

    微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法 具体情况: scroll-view 滚动,设置 display:flex 不生效并警告设置 enable-fl ...

随机推荐

  1. 使用soapUI代替WSDL2JAVA生成cxf HTTPS 客户端调用代码

    如果直接用cxf下面的wsdl2java生成https服务调用代码,会报https证书的错误.在你不想导入证书的情况下,可以使用soapUI进行客户端代码的生成,步骤如下: 1.设置CXF,如下图: ...

  2. 【BZOJ1861】【splay】Book 书架

    Description 小 T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本书,看完后放回书柜然后再拿 ...

  3. removing right click context menu options on recycle bin

    Humpty is correct as always  First you might want to make a backup of the reg key then remove the Wa ...

  4. win7访问windows server 2003服务器出现未知的用户名或者错误的密码(转载)

    直接放答案,感谢网友提供答案,否则自已还一直在纳闷,为什么? win7系统的安全机制限制了登陆.只要系统时间和win2003服务器的系统时间相差很多,系统就会阻止其登陆,并显示错误信息:"未 ...

  5. Cobar介绍及配置

    from:http://code.alibabatech.com/wiki/display/cobar/Home Skip to end of metadata   Page restrictions ...

  6. Jquery 简单的Tab选项卡特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. iscc2016-好长的字符串

    Vm0wd2QyVkhVWGhVYmxKV1YwZDRXRmxVUm5kVlJscHpXa2M1VjFKdGVGWlZNbmhQWVd4YWMxZHViRmROYWxaeVdWZDRZV014WkhG ...

  8. [BZOJ - 2463] [中山市选2009] 谁能赢呢？【“博弈论”】

    题目链接:BZOJ - 2463 题目分析 这道题的题解是,由于两人都采取最优策略,所以最后一定所有格子都会被走到.(Why..表示不懂..哪位神犇可以给我讲一下QAQ) Upd:半群的神犇告诉我,并 ...

  9. [BZOJ 1576] [Usaco2009 Jan] 安全路经Travel 【树链剖分】

    题目链接: BZOJ - 1576 题目分析 首先Orz Hzwer的题解. 先使用 dijikstra 求出最短路径树. 那么对于一条不在最短路径树上的边 (u -> v, w) 我们可以先沿 ...

  10. Kernel PCA 原理和演示

    Kernel PCA 原理和演示 主成份(Principal Component Analysis)分析是降维(Dimension Reduction)的重要手段.每一个主成分都是数据在某一个方向上的 ...