css 中的 column 分栏布局

最新推荐文章于 2024-06-29 11:58:27 发布

zm_1688

最新推荐文章于 2024-06-29 11:58:27 发布

阅读量772

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/m0_47611688/article/details/107922073

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 400px;
            border: 1px solid black;
            margin: 100px auto;
            /* column-count:表示分栏的列数； */
            column-count: 4;
            /* column-width: 100px;  count和width一起出现会起冲突，所以指定一个就好 */
            /* column-gap：分栏的间距 */
            column-gap: 20px;
            /* column-rule:分栏的边线； dashaed：虚线； */
            column-rule: 1px dashed red;
            text-align: center;
        }
        .box h2{
            /* column-span：合并分栏；（针对标题） */
            column-span: all;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>欧盟发公开信向意大利致歉</h2>
        <p>中新网4月3日电 据欧联网援引欧联通讯社报道，当地时间4月2日，欧盟委员会主席冯德莱恩在意大利媒体公开刊文，对欧盟未能在第一时间专注意大利疫情协同抗疫深表遗憾和歉意。冯德莱恩刊发的公开信使用了非常直白的标题“对不起，欧盟现在与你并肩”。</p>
        <p>冯德莱恩表示，新冠肺炎使成千上万的人失去了亲人，但饱受灾难的意大利也成为了所有人的榜样。意大利服装行业开始生产口罩、酒厂转产洗手液。阳台上的音乐声虽然回荡在空无一人的街道里，却温暖了无数人的心。正是通过这些无数的小细节展示了意大利人在日常生活中的团结。</p>
        <p>冯德莱恩说，很遗憾，以前欧盟并没有给予意大利疫情足够的关注和支持，欧洲各国也没有意识到只有团结在一起，欧洲才能打赢这场抗疫战争，各国原本可以避免十分不利的被动局面。如今，欧盟将和意大利站在一起并肩抗疫。</p>
        <p>冯德莱恩指出，欧盟将尽其所能协调成员国之间的合作，共同面对疫情危机，寻求协同答案。她说，截至目前已经有25个欧洲国家向意大利和西班牙送出数百万只口罩，这就是欧盟团结的力量。</p>
    </div>
</body>
</html>

在这里插入图片描述

column-count:表示分栏的列数；
column-width：表示每栏的宽度；
column-gap：分栏的间距；
column-rule:分栏的边线； dashaed：虚线；
column-span：合并分栏；（针对标题）

注：超出部分会溢出；

zm_1688

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css 中的 column 分栏布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{
复制链接

扫一扫