column-count瀑布流导致元素被截断-解决方法

最新推荐文章于 2024-03-14 15:44:04 发布

爱上你家菜包

最新推荐文章于 2024-03-14 15:44:04 发布

阅读量2.6k

点赞数 12

分类专栏：基础/常用文章标签： css

本文链接：https://blog.csdn.net/s18813688772/article/details/123801632

版权

基础/常用专栏收录该内容

27 篇文章 0 订阅

订阅专栏

css的 column-count 可使布局变为瀑布流，但默认情况下，子元素会被分割开

<!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>瀑布流布局</title>
    <style>
        .waterfall {
			display: inline-block;
			column-count: 6;	/* 分割的列数 */
			column-gap: 10px;	/* 列的间隔 */
			border: 1px solid red;
        }
        .item{
			width: 100px;
			height: 120px;
			border: 1px solid;
            /* 避免子元素被分割的 2种方式 */
			/*page-break-inside: avoid;*/  /* 方式1 */
            /*-webkit-column-break-inside: avoid;*/  /* 方式2 */
        }
		.item:nth-child(odd){
			height: 80px;
		}
    </style>
</head>

<body>
    <div class="waterfall">
        <div class="item">
            <img src="./img/set3/1.jpg" alt="1">
        </div>
        <div class="item">
            <img src="./img/set3/2.jpg" alt="2">
        </div>
        <div class="item">
            <img src="./img/set3/3.jpg" alt="3">
        </div>
        <div class="item">
            <img src="./img/set3/4.jpg" alt="4">
        </div>
        <div class="item">
            <img src="./img/set3/5.jpg" alt="5">
        </div>
        <div class="item">
            <img src="./img/set3/6.jpg" alt="6">
        </div>
        <div class="item">
            <img src="./img/set3/7.jpg" alt="7">
        </div>
        <div class="item">
            <img src="./img/set3/8.jpg" alt="8">
        </div>
        <div class="item">
            <img src="./img/set3/9.jpg" alt="9">
        </div>
        <div class="item">
            <img src="./img/set3/1.jpg" alt="10">
        </div>
        <div class="item">
            <img src="./img/set3/2.jpg" alt="11">
        </div>
        <div class="item">
            <img src="./img/set3/3.jpg" alt="12">
        </div>
        <div class="item">
            <img src="./img/set3/4.jpg" alt="13">
        </div>
        <div class="item">
            <img src="./img/set3/5.jpg" alt="14">
        </div>
        <div class="item">
            <img src="./img/set3/6.jpg" alt="15">
        </div>
        <div class="item">
            <img src="./img/set3/7.jpg" alt="16">
        </div>
        <div class="item">
            <img src="./img/set3/8.jpg" alt="17">
        </div>
    </div>
</body>

</html>

如下图，可以看到元素被分割开了。

解决方法：

为子元素加上样式：page-break-inside: avoid; 或 -webkit-column-break-inside: avoid; 即可。

效果如下图：

爱上你家菜包

关注

12
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
column-count瀑布流导致元素被截断-解决方法

css的 column-count 可使布局变为瀑布流，但默认情况下，子元素会被分割开<!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-Compa.
复制链接

扫一扫

专栏目录