码迷,mamicode.com
首页 > Web开发 > 详细

CSS3(10)多列

时间:2020-04-12 18:45:04      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:nbsp   col   默认值   width   指定   设置   国家   属性   默认   

CSS3 多列属性

本章节我们将学习以下几个 CSS3 的多列属性:

  • column-count   分割的列数
  • column-gap    列与列的间隙
  • column-rule-style 列与列间的边框样式
  • column-rule-width 列与列间的边框厚度
  • column-rule-color 列与列间的边框颜色
  • column-rule    上面3个的缩写
  • column-span    指定元素跨越多少列
  • column-width   指定列的宽度

CSS3 创建多列

代码:

<style>

div

{

  border:1px solid #000;

  width:500px;

  padding:5px;

  column-count:3;

  column-gap:20px;

  column-rule:dotted 1px red;

}

</style>

效果:

当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。

指定元素跨越多少列

代码:

<div style="column-count:3;">

  <h2 style="column-span:all">这是标题</h2>

  当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。

</div>

效果:

这是标题

  当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。
 
column-span的默认值是1,不设置的效果为:
 

这是标题

  当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。

CSS3(10)多列

标签:nbsp   col   默认值   width   指定   设置   国家   属性   默认   

原文地址:https://www.cnblogs.com/1016391912pm/p/12686428.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!