hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

css columns属性怎样用【html5教程】

2019-11-26HTML搜搜PHP网73°c
A+ A-

css ccolumns属性用法

columns:饱含两个属性column-width,column-count

1.column-width 列的宽度

2.column-count 列数

浏览器兼容:

Internet Explorer 10 和 Opera 支撑 column 属性

Firefox 支撑替换的 -moz-column 属性

Safari 和 Chrome 支撑替换的 -webkit-column 属性

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{margin:0;padding:5px 10px;background:#eee;}
        h1{margin:10px 0;font-size:16px;}
        .test1{
            width:628px;
            border:10px solid #000;
            -moz-columns:100px 4;
            -webkit-columns:100px 4;
            columns:100px 4;
        }
        .test2{
            border:10px solid #000;
            -moz-columns:400px;
            -webkit-columns:400px;
            columns:400px;
        }
    </style>
</head>
<body>
<h1>列数及列宽牢固:</h1>
<div>
    <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets laid out in multiple columns. </p>
    <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets laid out in multiple columns. </p>
    <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of usingn to another on various output devices including speech</p>
    <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of usingn to another on various output devices including speech synthesizers and small mobile devices.</p>
</div>
<h1>列宽牢固,依据内容自动散布列数:</h1>
<div>
    <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
    <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
</body>
</html>

运转效果

以上就是css columns属性怎样用的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
css columns属性怎样用【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
推荐阅读