css columns属性怎么用-css教程-PHP中文网

css columns属性怎么用

silencement

发布： 2019-05-28 14:47:57

原创

3084人浏览过

css columns属性怎么用

css ccolumns属性用法

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

1.column-width 列的宽度

2.column-count 列数

立即学习“前端免费学习笔记（深入）”；

浏览器兼容：

Internet Explorer 10 和 Opera 支持 column 属性

Dompdf

dompdf是一个HTML到PDF转换器。在其核心，dompdf是一个（大部分）符合CSS 2.1标准的HTML布局和渲染引擎，使用PHP编写。它是一个以样式驱动的渲染器，它会下载并读取外部样式表，内联样式标签和单个HTML元素的样式属性。它还支持大多数表现性HTML属性。PDF渲染目前由PDFLib或由Wayne Munro编写的捆绑版本的R&OS CPDF类提供。（对R&OS类进行了一些重要的更改，但是）。为了使用dompdf与PDFLib，需要安装PDFLib PECL扩展。使用PD

查看详情

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>

登录后复制

运行结果