css3分栏布局

最新推荐文章于 2024-09-30 08:45:00 发布

明日份可乐

最新推荐文章于 2024-09-30 08:45:00 发布

阅读量1.1k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/ron_wang_/article/details/99684532

版权

本文介绍了如何使用CSS3的新特性，如Flexbox和Grid，来创建灵活且响应式的多栏布局。通过实例代码解析，详细讲解了如何设置布局方向、调整栏宽以及在不同屏幕尺寸下实现内容自适应排列。

摘要由CSDN通过智能技术生成

<!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 {
            /* 控制栏数 */
            column-count: 2; 
            /* 控制栏与栏之间的间隔样式 */
            column-rule: 1px solid red;
            /* 控制栏与栏之间的间距 */
            column-gap: 100px;
            /* 控制每一栏的宽度 */
            /* 会和栏数发生冲突 如果设置的宽度大于栏数自适应的宽度的话 会按照所设置的宽度来分割
            如果置的宽度小于栏数自适应的宽度的话 还是按照栏数来分割 */
            column-width: 600px;
        }
        h3 {
            /* column-span 属性规定元素应横跨多少列 只有1 和 all两个值 1就是只横跨一列 all就是横跨所有列 */
            column-span: all;
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>新闻联播</h3>
    <