多列布局的概念是什么？CSS多列布局的应用（实例代码）

程序员文章站 2022-03-30 18:07:21

...

这篇文章给大家介绍的内容是关于多列布局的概念是什么？CSS多列布局的应用（实例代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

多列布局

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

多列布局的概念是什么？CSS多列布局的应用（实例代码）

代码如下（具体的解释也在代码中）
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。
多列布局的概念是什么？CSS多列布局的应用（实例代码）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document李波</title>
    <style>
        .p {
            /*控制列数*/
            -moz-column-count: 3;
            /* Firefox */
            -webkit-column-count: 3;
            /* Safari and Chrome */
            column-count: 3;

            /*控制列和列之间的宽*/
            -moz-column-gap: 90px;
            /* Firefox */
            -webkit-column-gap: 90px;
            /* Safari and Chrome */
            column-gap: 90px;

            /*控制列和列之间的线*/
            -webkit-column-rule-style: dashed;
            /* Chrome, Safari, Opera */
            -moz-column-rule-style: dashed;
            /* Firefox */
            column-rule-style: dashed;

            /*控制列和列之间线的宽度*/
            -webkit-column-rule-width: 1px;
            /* Chrome, Safari, Opera */
            -moz-column-rule-width: 1px;
            /* Firefox */
            column-rule-width: 1px;

            /*控制列和列之间线的颜色*/
            -webkit-column-rule-color: green;
            /* Chrome, Safari, Opera */
            -moz-column-rule-color: green;
            /* Firefox */
            column-rule-color: green;

            /*以上的列和列之间线的宽度、颜色、以及性质都可缩写为“column-rule”*/
            -webkit-column-rule: 1px dashed green;
            /* Chrome, Safari, Opera */
            -moz-column-rule: 1px dashed green;
            /* Firefox */
            column-rule: 1px dashed green;

            /*若没有设置列数，就会根据列宽走*/
            -webkit-column-width: 190px;
            /* Chrome, Safari, Opera */
            column-width: 370px;

        }



        .p h1 {
            text-align: center;
            -webkit-column-span: all;
        }
    </style>
</head>

<body>
    <p class="p">

        <h1>我的爱好</h1>
        <h3>第一段内容</h3>
        <p style="color:red">
            <b>注意:</b>( Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。）</p>
        <p>每个人都生活在成长当中，在成长当中也会有更多的梦想，更多的坚持！慢慢凝结成成长的深海。

                我=画画</p>
        <h3>第二段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
        <h3>第三段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
        <h3>第四段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>
        <h3>第五段内容</h3>
        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>

    </p>
</body>

</html>

多列布局的概念是什么？CSS多列布局的应用（实例代码）

使用CSS3实现多列布局与多背景的技巧

谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

CSS多列布局 - 小火柴的蓝色理想

css3中什么是多列布局？columns属性的介绍（实例）

css设置多列等高布局的方法示例

CSS全兼容的多列均匀布局问题解决方法

两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高_html/css_WEB-ITnose

css3多列布局如何实现？css3多列布局的实现方法（column）

css3中的多列布局columns详解_html/css_WEB-ITnose