>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 27438 个阅读者 刷新本主题
 * 贴子主题:  CSS3 多列布局 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2020-01-30 19:34:27     消息  查看  搜索  好友  邮件  复制  引用

  

CSS3 多列布局

CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例:

.newspaper {

    border:1px black solid;

    padding: 15px;

    -webkit-column-count: 3; /* Chrome, Safari, Opera */

    -moz-column-count: 3; /* Firefox */

    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */

    -moz-column-gap: 40px; /* Firefox */

    column-gap: 40px;

    -webkit-column-rule: 1px solid lightgrey; /* Chrome, Safari, Opera */

    -moz-column-rule: 1px solid lightgrey; /* Firefox */

    column-rule: 1px solid lightgrey;

}

浏览器支持

     表格中的数字表示支持该方法的第一个浏览器的版本号。

     紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

      
属性
column-count 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-gap 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule-color 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-style 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
        

CSS3 多列属性

     下面介绍以下几个 CSS3 的多列属性:    
  • column-count

  • column-gap

  • column-rule-style

  • column-rule-width

  • column-rule-color

  • column-rule

  • column-span

  • column-width

CSS3 创建多列

column-count

属性指定了需要分割的列数。

         以下实例将 <div> 元素中的文本分为 3 列:

实例

          div {
          -webkit-column-count:  3;  /* Chrome, Safari, Opera */

          -moz-column-count:  3;  /* Firefox */

         column-count:  3;

         }

CSS3 多列中列与列间的间隙

column-gap

属性指定了列与列间的间隙。

         以下实例指定了列与列间的间隙为 40 像素:

实例

div{
    -webkit-column-gap:  40px;  /* Chrome, Safari, Opera */

   -moz-column-gap:  40px;  /* Firefox */

   column-gap:  40px;

    }

CSS3 列边框

     column-rule-style 属性指定了列与列间的边框样式:

实例

div{
  -webkit-column-rule-style:  solid;  /* Chrome, Safari, Opera */

   -moz-column-rule-style:  solid;  /* Firefox */

   column-rule-style:  solid;

    }

    column-rule-width 属性指定了两列的边框厚度:

实例

div{
   -webkit-column-rule-width:  1px;  /* Chrome, Safari, Opera */

   -moz-column-rule-width:  1px;  /* Firefox */

   column-rule-width:  1px;

    }

column-rule-color 属性指定了两列的边框颜色:

实例

div{
    -webkit-column-rule-color:  lightblue;  /* Chrome, Safari, Opera */

   -moz-column-rule-color:  lightblue;  /* Firefox */

   column-rule-color:  lightblue;

    }

        column-rule 属性是 column-rule-* 所有属性的简写。

         以下实例设置了列直接的边框的厚度,样式及颜色:

实例

div{

   -webkit-column-rule:  1px solid lightblue;  /* Chrome, Safari, Opera */

   -moz-column-rule:  1px solid lightblue;  /* Firefox */

   column-rule:  1px solid lightblue;

    }

指定元素跨越多少列

  以下实例指定 <h2> 元素跨越所有列:

实例

h2 {
   -webkit-column-span:  all;  /* Chrome, Safari, Opera */

   column-span:  all;

    }

指定列的宽度

        column-width 属性指定了列的宽度。        

实例

div {
   -webkit-column-width:  100px;  /* Chrome, Safari, Opera */

   column-width:  100px;

    }

CSS3 多列属性

     下表列出了所有 CSS3 的多列属性:

      
属性 描述
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns 设置 column-width 和 column-count 的简写






程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-01-31 14:14:43 重新编辑]
  Java面向对象编程-->图形用户界面(上)
  JavaWeb开发-->集合(上)
  JSP与Hibernate开发-->JSP技术详解(Ⅱ)
  Java网络编程-->Web运作原理(Ⅳ)
  精通Spring-->
  Vue3开发-->数据库事务的并发问题的解决方案
  vue3 composition API的用法
  Axios拦截器的用法
  css3中translate、transform和translation,以及动画animati...
  vue的CSS过渡和动画范例
  vue中监听object数据变化的基本原理
  Vue项目的性能优化之路
  Vue自定义指令的用法
  14个JavaScript优化建议
  JavaScript的HTML DOM td / th 对象
  Javascript DOM封装方法汇总
  jQuery UI 如何使用部件库
  HTML标签的全局属性
  HTML5 语义元素
  JavaScript 测试 jQuery
  JavaScript的window.screen对象
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。