css3 多列布局使用

css3的出现，解决了不少前端的问题，比如动画，圆角等；

这里总结一下css3 的多列布局；

w3c上给出了很多属性；

我们一般用到column-count、column-gap、column-width这三个属性，

其中column-count和column-width最好不要同时出现；

还有在规定的多列布局容器内的元素；要使用display：inline-block属性；否则会出现错乱；

例如：在畅游西城的项目中；

布局代码如下

dl没有使用display：inline-block属性；导致下图情况

调整后正常；

这个问题值得研究

时间： 2024-12-29 01:58:50

css3 多列布局使用的相关文章

CSS3 多列布局——Columns

CSS3 多列布局--Columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数:列宽和列数. 参数参数说明 <column-width> 主要用来定义多列中每列的宽度 <column-count> 主要用来定义多列中的列数实例代码: <!DOCTYPE html> <html> <head> <meta charse

第28章 CSS3多列布局

第 28章 CSS3多列布局学习要点:1.早期多列问题2.属性及版本3.属性解释本章主要探讨 HTML5中 CSS3提供的多列布局,通过多列布局我们方便的创建流体的多列布局.一．早期多列问题我们有时想布局成报纸.杂志那样的多列方式(至少两列,一般三列以上),但早期CSS提供的布局方式都有着极大的限制.如果是固体布局,那么使用浮动或定位布局都可以完成.但对于流体的多列,比如三列以上,那只能使用浮动布局进行,而它又有极大的限制.因为它是区块性的,对于动态的内容无法伸缩自适应,基本无能力.//五段内

css3多列布局

http://www.webhek.com/css3-multi-columns http://express.ruanko.com/ruanko-express_46/technologyexchange5.html CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行:人们的视点从文本的一端移到另一端.然后换到下一行的

第 28 章 CSS3 多列布局

学习要点: 1.早期多列问题 2.属性及版本 3.属性解释主讲教师:李炎恢本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一．早期多列问题我们有时想布局成报纸.杂志那样的多列方式(至少两列,一般三列以上),但早期 CSS 提供的布局方式都有着极大的限制.如果是固体布局,那么使用浮动或定位布局都可以完成.但对于流体的多列,比如三列以上,那只能使用浮动布局进行,而它又有极大的限制.因为它是区块性的,对于动态的内容无法伸缩自适应,基本无能力.

css3多列布局瀑布流加载样式

看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3多列属性瀑布流</title> <style> /*大层*/ .container{width:80%;margin: 0 auto;}

css3-web字体 and CSS3多列布局与伸缩布局

WEB字体语法 @font-face{ font-family:""; src:url() format() .... } 兼容性写法 @font-face { font-family: 'diyfont'; src: url('diyfont.eot'); /* IE9+ */ src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('diyfont.woff') format('w

css3 多列布局

一.多列布局——Columns 语法:columns:<column-width> || <column-count> 1. column-width: 主要用来定义多列中每列的宽度 column-width: auto | <length> length: 使用固定值来设置元素列的宽度,其主要是由数值和长度单位组成,不过其值只能是正值,不能为负值. 2. column-count:主要用来定义多列中的列数 column-count:auto | <intege

CSS自学笔记（15）:CSS3多列布局

在CSS3中,也新增了一些关于文本布局的几个比较简单的属性.通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样. 新增的部分属性,以及浏览器支持情况: 属性浏览器支持 column-count IE Firefox(-moz-) Chrome(-webkit-) Safari(-webkit-) Opera column-gap IE Firefox(-moz-) Chrome(-webkit-) Safari(-webkit-) Opera column-rule IE F

CSS多列布局

1.多列等高布局这种布局即每一列的高度保持一致,高度与最高的一列相同.等高布局是为了维护边框线条的完整性,在有些地方则可能是为了维护背景的完整性,达到整体一致不缺失的效果. 最常用的方法为padding补偿法: .container{ overflow:hidden; } .item{ float:left; width:100px; margin-right:10px; padding-bottom:10000px; margin-bottom:-10000px; } <div class=