CSS“多列布局”（补充）——WEB开发系列35

一条晒干的咸魚

已于 2024-09-10 15:02:09 修改

阅读量713

点赞数 10

分类专栏： WEB前端文章标签： javascript 前端 css html 多列布局 css3

于 2024-09-10 14:41:34 首次发布

本文链接：https://blog.csdn.net/leecoo666/article/details/142098641

版权

WEB前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。

一、CSS多列布局概述

CSS多列布局允许我们将内容分成多个垂直列，使页面布局更加灵活和多样化。多列布局的主要属性包括 column-count、column-width 和 column-gap，这些属性可以单独或结合使用，以实现所需的列布局效果。

多列布局的基本属性

column-count：指定列的数量。例如，column-count: 3; 表示将内容分为三列。
column-width：指定列的最小宽度。浏览器会根据这个宽度自动调整列数，以适应容器的宽度。
column-gap：指定列与列之间的间距。可以使用像素（px）、百分比（%）等单位。

二、创建一个简单的三列布局

让我们从一个简单的三列布局示例开始。假设我们有一个包含大量文本的容器，我们希望将这些文本分成三列显示。

基本的三列布局示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三列布局示例</title>
    <style>
        .container {
            column-count: 3;
            column-gap: 20px;
            padding: 20px;
            background-color: #f0f0f0;
            max-width: 800px;
            margin: 0 auto;
        }
        .container p {
            margin: 0;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>在书中看过一个故事。有只兔子腹部不小心被荆棘划伤，一下子就流血了。痛苦之下，它龇牙咧嘴地呻吟着。有几只路过的动物听到了，就走过来，一边同情地望着，一边安慰它。看到自己这么受重视，兔子内心非常享受。为了吸引更多的关注，它就放开嗓子，更加卖力地惨叫起来。果然围过来的动物越来越多，兔子更兴奋了，甚至还把伤口扒开，主动展示给别的动物看。结果由于没及时处理，没过一会儿，兔子就失血过多死掉了。</p>
        <p>现实中有很多像兔子那样的人，在遭遇伤痛后，到处吆喝卖惨，最终导致悲惨的结局。</p>
        <p>作家傅菲说，把伤口一次次撕开给别人看，其实是对自己的折磨。面对人生的种种不幸，懂得把伤痛藏起来，默默承担，才能疗愈自己，扭转命运。人生在世，永远不要兜售自己的苦难。</p>
    </div>
</body>
</html>

示例中我们使用 column-count 属性将容器的内容分为三列，使用 column-gap 属性设置列与列之间的间距为20px。你可以看到，文本会自动分成三列，并在列之间留有间距。

三、为多列布局添加样式

除了基本的列设置，我们还可以通过CSS为多列布局添加更多样式，使布局更具吸引力。

为多列布局添加边框和背景色

我们可以为每列添加不同的背景色和边框，使布局更加生动有趣。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式化的三列布局示例</title>
    <style>
        .container {
            column-count: 3;
            column-gap: 20px;
            padding: 20px;
            background-color: #f0f0f0;
            max-width: 800px;
            margin: 0 auto;
        }
        .container p {
            margin: 0;
            line-height: 1.6;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .container p:nth-child(odd) {
            background-color: #e0f7fa;
        }
        .container p:nth-child(even) {
            background-color: #f1f8e9;
        }
    </style>
</head>
<body>
    <div class="container">
         <p>在书中看过一个故事。有只兔子腹部不小心被荆棘划伤，一下子就流血了。痛苦之下，它龇牙咧嘴地呻吟着。有几只路过的动物听到了，就走过来，一边同情地望着，一边安慰它。看到自己这么受重视，兔子内心非常享受。为了吸引更多的关注，它就放开嗓子，更加卖力地惨叫起来。果然围过来的动物越来越多，兔子更兴奋了，甚至还把伤口扒开，主动展示给别的动物看。结果由于没及时处理，没过一会儿，兔子就失血过多死掉了。</p>
        <p>现实中有很多像兔子那样的人，在遭遇伤痛后，到处吆喝卖惨，最终导致悲惨的结局。</p>
        <p>作家傅菲说，把伤口一次次撕开给别人看，其实是对自己的折磨。面对人生的种种不幸，懂得把伤痛藏起来，默默承担，才能疗愈自己，扭转命运。人生在世，永远不要兜售自己的苦难。</p>
    </div>
</body>
</html>

此示例我们为每个段落添加了边框、背景色和圆角边框，并使用 nth-child 选择器为奇数和偶数的段落分别设置不同的背景色。这样可以使每列的内容更加突出。

四、处理列与内容折断

在实际应用中，我们可能希望控制列内的内容如何折断，以确保布局的整洁性。CSS提供了 break-inside 属性来处理列与内容的折断问题。

使用 `break-inside` 属性

break-inside 属性用于控制元素在多列布局中的折断行为。常见的值包括：

auto：默认值，允许内容在列中折断。
avoid：尽量避免在列之间折断，适用于较大的块元素，如图片或广告。
avoid-page：尽量避免在页面之间折断，通常用于分页内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>避免折断示例</title>
    <style>
        .container {
            column-count: 3;
            column-gap: 20px;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .container p {
            margin: 0;
            line-height: 1.6;
            break-inside: avoid;
            background-color: #e0f7fa;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .container img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
       
        <img src="example.jpg" alt="示例图片">
         <p>在书中看过一个故事。有只兔子腹部不小心被荆棘划伤，一下子就流血了。痛苦之下，它龇牙咧嘴地呻吟着。有几只路过的动物听到了，就走过来，一边同情地望着，一边安慰它。看到自己这么受重视，兔子内心非常享受。为了吸引更多的关注，它就放开嗓子，更加卖力地惨叫起来。果然围过来的动物越来越多，兔子更兴奋了，甚至还把伤口扒开，主动展示给别的动物看。结果由于没及时处理，没过一会儿，兔子就失血过多死掉了。</p>
        <p>现实中有很多像兔子那样的人，在遭遇伤痛后，到处吆喝卖惨，最终导致悲惨的结局。</p>
        <p>作家傅菲说，把伤口一次次撕开给别人看，其实是对自己的折磨。面对人生的种种不幸，懂得把伤痛藏起来，默默承担，才能疗愈自己，扭转命运。人生在世，永远不要兜售自己的苦难。</p>
    </div>
</body>
</html>

break-inside: avoid; 确保段落不会被分割到不同的列中。注意，break-inside 的效果可能会因浏览器支持情况而有所不同。

五、高级应用和布局技巧

创建响应式多列布局

在响应式设计中，我们可以使用媒体查询来调整多列布局，以适应不同的屏幕尺寸。

示例：响应式三列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式三列布局示例</title>
    <style>
        .container {
            column-count: 3;
            column-gap: 20px;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .container p {
            margin: 0;
            line-height: 1.6;
            background-color: #e0f7fa;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        @media (max-width: 800px) {
            .container {
                column-count: 2;
            }
        }

        @media (max-width: 500px) {
            .container {
                column-count: 1;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <p>在书中看过一个故事。有只兔子腹部不小心被荆棘划伤，一下子就流血了。痛苦之下，它龇牙咧嘴地呻吟着。有几只路过的动物听到了，就走过来，一边同情地望着，一边安慰它。看到自己这么受重视，兔子内心非常享受。为了吸引更多的关注，它就放开嗓子，更加卖力地惨叫起来。果然围过来的动物越来越多，兔子更兴奋了，甚至还把伤口扒开，主动展示给别的动物看。结果由于没及时处理，没过一会儿，兔子就失血过多死掉了。</p>
        <p>现实中有很多像兔子那样的人，在遭遇伤痛后，到处吆喝卖惨，最终导致悲惨的结局。</p>
        <p>作家傅菲说，把伤口一次次撕开给别人看，其实是对自己的折磨。面对人生的种种不幸，懂得把伤痛藏起来，默默承担，才能疗愈自己，扭转命运。人生在世，永远不要兜售自己的苦难。</p>
    </div>
</body>
</html>

示例中使用媒体查询来根据屏幕宽度调整列数。当屏幕宽度小于800px时，列数变为2列；当屏幕宽度小于500px时，列数变为1列。这样可以确保布局在不同设备上都能良好展示。

多列布局与浮动元素结合使用

在某些复杂布局中，我们可能需要将多列布局与浮动元素结合使用。例如，将一个多列布局的容器与浮动的图片结合使用。

示例：多列布局与浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多列布局与浮动元素示例</title>
    <style>
        .container {
            column-count: 3;
            column-gap: 20px;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .container p {
            margin: 0;
            line-height: 1.6;
            background-color: #e0f7fa;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .container img {
            float: left;
            width: 30%;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="example.png" alt="示例图片1"> 
        <p>在书中看过一个故事。有只兔子腹部不小心被荆棘划伤，一下子就流血了。痛苦之下，它龇牙咧嘴地呻吟着。有几只路过的动物听到了，就走过来，一边同情地望着，一边安慰它。看到自己这么受重视，兔子内心非常享受。为了吸引更多的关注，它就放开嗓子，更加卖力地惨叫起来。果然围过来的动物越来越多，兔子更兴奋了，甚至还把伤口扒开，主动展示给别的动物看。结果由于没及时处理，没过一会儿，兔子就失血过多死掉了。</p>
        
        <img src="example2.png" alt="示例图片2">
         <p>现实中有很多像兔子那样的人，在遭遇伤痛后，到处吆喝卖惨，最终导致悲惨的结局。</p>
       
        <img src="example3." alt="示例图片3">
         <p>作家傅菲说，把伤口一次次撕开给别人看，其实是对自己的折磨。面对人生的种种不幸，懂得把伤痛藏起来，默默承担，才能疗愈自己，扭转命运。人生在世，永远不要兜售自己的苦难。</p>
    </div>
</body>
</html>