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蛮的全栈之路-序章 技术栈选择与全栈工程师

    目录 C蛮的全栈之路-序章 技术栈选择与全栈工程师C蛮的全栈之路-node篇(一) 环境布置C蛮的全栈之路-node篇(二) 实战一:自动发博客 博主背景 985院校毕业,至今十年C++开发工作经验, ...

  2. 关于JavaScript的类的继承

    其实最一开始学JS的时候就看过继承的实现.当时只是去试着理解从书上看来的代码段而已.今天又重新思考了一下,感觉这是一个思维探索演进的结果. 继承,即复用. 如果抛开继承的固有思想,让b复用a的成员,最 ...

  3. Cocos Studio1.5.0.1开发学习笔记（一）

    听说Cocos Studio很久了,主要是因为骨骼动画.目前看来Cocos2d-x播放动画的方式只有2种: 第一种:是播放序列帧动画,即将动画的每一帧都加载进缓存里,需要播放时再使用Animation ...

  4. HDU 3359 Kind of a Blur(高斯消元)

    题意: H * W (W,H <= 10) 的矩阵A的某个元素A[i][j],从它出发到其他点的曼哈顿距离小于等于D的所有值的和S[i][j]除上可达点的数目,构成了矩阵B.给定矩阵B,求矩阵A ...

  5. C# 当double数值较大且小数位过多时转化成字符串并保留小数位

    今天在C#中碰到了一个问题,需要将double转换成字符串显示,要求保留小数位. 在网上查询了一下相关的文章 具体如下: double temp=3.1415926; (F)Fixed point:s ...

  6. c#解析xml字符串 分析 EntityName 时出错

    因为xml字符串中的特殊html字符被转义了,怎么防止转义呢,可以在xml内加上<![CDATA[返回内容]] 这样可以防止特殊字符被转义,就好像微信公共平台消息传递也都是xml格式他们也都加& ...

  7. nginx下搭建fastcgi的开发环境

    在上一章最简单理解CGI,FastCGI,WSGI  我们将fastcgi规范类比HTTP.下面我们通过一个案例更加明白fastcgi 我们使用的是 nginx作为前端 代理,我们包装了gevent_ ...

  8. 巧用powerpoint制作符合期刊要求的复合图

  9. 【Java】Java6 WebService的发布

    WebService服务发布往往比较混乱,Axis2的发布形式与XFire发布方式差别很大,而Java6 Web服务的发布与Axis2.XFire的Web服务的发布方式也有着天壤之别,它们之间没有经验 ...

  10. 【Java】Hibernate4实战 之 第一部分Hibernate入门

    Hibernate是什么:ORMapping的原理 Hibernate是轻量级的ORMapping框架. ORMapping基本规则: 类和表映射. 实例和数据库表中的一条数据映射. 实例的属性和数据 ...