css3 多列

憨憨404

已于 2023-12-12 18:49:24 修改

阅读量143

点赞数

分类专栏： HTML + CSS + CSS3（页面布局）文章标签：前端 css css3

于 2022-11-21 19:12:22 首次发布

本文链接：https://blog.csdn.net/qq_60839348/article/details/127970300

版权

HTML + CSS + CSS3（页面布局）专栏收录该内容

23 篇文章 0 订阅

订阅专栏

多列布局类似报纸或杂志中的排版方式，主要用以控制大篇幅文本。

column-count: ; 分成几列

使用后，会出现断层，解决方案：不要让盒子里面的元素换行显示，这个属性只有在多列的时候才会用

break-inside: avoid；解决断层

    <!-- 
        多列 ：也是一种布局方式：适用于参差不齐的布局。

        A1.  column-count: ;      按照列数进行划分，写几就是按照几列划分

        2.  column-width: ;      按照列宽进行划分，程序会根据写好的宽度自动计算出要分成几列
        3.  column-gap: ;       列间距，<非必要不调整>
        4.  column-rule-width:; 列线的宽度
            column-rule-style:; 列线的样式
            column-rule-color:; 列线的颜色
            简写：
            column-rule:5px solid red;
        5.column-fill:;      列填充的
            auto：尽量让每一行的高度和盒子的高度
            balance(默认值)：尽量让列与列的高度是保持一致的
        6.column-span:; 设置标题是否横跨列：（该单词是写给标题的）


        A7.break-inside: avoid;  解决断层的问题。谁断写给谁。
     -->

<style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            /* 多列 */
            column-count: 2;
            
            background: url(img/a.png),url(img/bg.gif);
            background-color: #352323;
        }
        figure{
            border: 5px solid pink;
            padding: 5px;
            margin-top: 10px;

            /* 解决断层问题 */
            break-inside: avoid;
        }
        figure img{
            width: 100%;
        }
        figcaption{
            color: #a77869;
            font-weight: 700;
            text-align: center;
        }
  </style>

<body>
    <figure>
        <img src="img/1.jpg" alt="">
        <figcaption>往后余生，风雪是你。</figcaption>
    </figure>
    <figure>
        <img src="img/2.jpg" alt="">
        <figcaption>往后余生，风雪是你。</figcaption>
    </figure>
    <figure>
        <img src="img/3.jpg" alt="">
        <figcaption>往后余生，风雪是你。</figcaption>
    </figure>
    <figure>
        <img src="img/4.jpg" alt="">
        <figcaption>往后余生，风雪是你。</figcaption>
    </figure>
    <figure>
        <img src="img/5.jpg" alt="">
        <figcaption>往后余生，风雪是你。</figcaption>
    </figure>
</body>