零基础建站培训介绍

当前位置:

CSS3多栏布局属性详解: column-count、column-width、column-gap、column-rule

 column-count属性:

column-count将 div 元素中的文本分为几列显示,常用于文章进行分列阅读。缺点是几列的宽度是一样的2


div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
column-width:规定列的宽度

div
{
column-width:100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari 和 Chrome */
}
column-gap:规定列与列之间的距离

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
column-rule:给栏目增加一个分隔线。

3


div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari 和 Chrome */
column-rule:3px outset #ff00ff;
}
 

						
						                          						
上一课: 下一课:

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签)的浮动布局,浮
  • 对于做网站来说,很头疼的问题就是网站做好后,不同浏览器出现不兼容的情况。主要原因就是由于不同浏览器对某些标签的属性初始值【margin,padding,fon
  • 新增背景属性background-clipbackground-originbackground-sizeCSS常用背景属性background-repeatbackground-image边框样式border
  • css 4种引入方式 (12865 次学习)
    HTML中引入CSS控制有下面四种方式:(相关教程:HTML入门教程)1)行内式比如:<body><h1 style="color:white;background-color:bl
  • CSS3新增选择器有哪些 (142076 次学习)
    css1-css3提供特别丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。(相关教程:CSS3视频教
  • 弹性盒布局模型(Flexible Box Layout)是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局
  • overflow这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可
  • 背景样式在制作网站过程中经常使用到。以下是CSS background 背景样式经常使用到的几种样式:背景属性以及背景位置的控制:1、background-position
  • Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的
  • 在CSS中可以控制DIV的边框产生阴影效果,达到立体感.也可以给图片添加阴影,使整个网站版面更加美观.CSS设置阴影效果的样式为box-shadow属性,使用方法: