css多列布局

最新推荐文章于 2024-11-14 17:40:35 发布

Tao13197

最新推荐文章于 2024-11-14 17:40:35 发布

阅读量359

点赞数 5

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_60897029/article/details/141897805

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多列布局</title>
    <style>
        section{
            width: 1000px;
            height: 500px;
            border: 1px solid black;
            margin: 100px auto;
            columns: 3;/*当前容器分为多少列*/
            column-width: 200px;/*当前列的宽度*/
            column-gap: 50px;/*列和列的间距*/
            column-rule: 5px solid dodgerblue;/*列的边框*/
        }
        h3{
            text-align: center;
            column-span: 1; /*all/1 合并或者分开分栏*/
        }
    </style>
</head>
<body>
    <section>
        <h3>超级无敌曼波大标题</h3>
        <p>提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！
            提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！
            提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！
            提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！
            提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！
            提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！
            提莫队长正在待命！提莫队长正在待命！提莫队长正在待命！</p>
    </section>
</body>
</html>