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. c++面试（一）

    1.在c++中可以通过"::"来直接操作全局变量. 2.i++与++i效率的比较. (1)內建数据类型时,他们的效率差别不大. (2)自定义数据类型(类等)的情况,(++i)可以返 ...

  2. 将listBox中信息显示在dataGridview中，操作datagridview后删除listBox信息和SQL数据库信息 续（浅谈listBox..）

    应用场景      对datagridview控件使用了解,以及操作datagridview选中的信息删除,并且有二次确认后才删除用户信息.相应的删除listbox中用户信息,下面一起看看需要哪些准备 ...

  3. php之分页类代码

    /* 思路 1.把地址栏的URL获取 2.分析URL中的query部分--就是?后面传参数的部分 3.query部分分析成数组 4.把数组中的page单元,+1,-1,形成2个新的数组 5.再把新数组 ...

  4. RemoteViews嵌入ListView复杂布局

    from http://blog.csdn.net/liliang497/article/details/8308313 主要函数 public void setRemoteAdapter (int ...

  5. 3.1决策树理论--python深度机器学习

    参考彭亮老师的视频教程:转载请注明出处及彭亮老师原创 视频教程: http://pan.baidu.com/s/1kVNe5EJ   0. 机器学习中分类和预测算法的评估:   准确率 速度 强壮行 ...

  6. uboot总结：uboot配置和启动过程2（mkconfig分析）

    说明:文件位置:在uboot的目录下,文件名为:mkconfig.本身是一个脚本文件. 它的主要作用的是: (1)创建一个重要的符号链接 (2)创建一个config.mk文件(在include目录下) ...

  7. OC 之 谓词

    NSPredicate 分类: Objective-C iOS XCode Mac2012-10-26 17:26 10557人阅读 评论(1) 收藏 举报 简述:Cocoa框架中的NSPredica ...

  8. 转:基于ASP.NET的Comet长连接技术解析

    原文来自于: Comet技术原理 来自维基百科:Comet是一种用于web的技术,能使服务器能实时地将更新的信息传送到客户端,而无须客户端发出请求,目前有两种实现方式,长轮询和iframe流. 简单的 ...

  9. codeforces Dima and Bacteria

    题意:给出n,m和k,表示有n个细菌,m种仪器和k种细菌,给出k种细菌的数量ci,然后每个细菌按照种类排成一排(所以有第i种细菌的序号从∑(1≤j≤i-1)cj + 1 到∑(1≤j≤i)cj):接下 ...

  10. For循环复杂练习

    for是循环当中经常用到的一个结构,练熟了才可以. 练习-需求描述: 在控制台打印以下形式的字符: * * * * * * * * * * * * * * * 思路,首先分析需求的规律 1.首先分析需 ...