Css3瀑布流

最新推荐文章于 2024-08-03 15:29:52 发布

Red_Xx

最新推荐文章于 2024-08-03 15:29:52 发布

阅读量209

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/a578024797/article/details/89240031

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Css3瀑布流

具体属性就不过多介绍了，只简单说一下几个属性，在外层盒子上单独使用 column-count: ‘列数(4)’; 代表内部盒子分为4列的形式，单独使用column-width：(宽度) 代表每一列的盒子宽为多少，如果这两个属性共同使用以column-count 为准， 需要注意的是在chrome下最底部的盒子可能被截断到另一列，所以在内部盒子中可以使用两种方法解决 1， break-inside: avoid; 2. height: 100%;overflow: auto;

<!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>
      .main {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
        /* column-width: 100px; */
      }
      .item {
        padding: 15px;
        border: solid 2px #eeeeee;
        border-radius: 4px;
        margin-bottom: 15px;
        cursor: pointer;
        break-inside: avoid;
        /* height: 100%;
        overflow: auto; */
      }
      .item img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="item">
        <img src="../Pinterest/images/c4.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c5.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c1.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c2.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c3.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c4.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c5.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c6.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c1.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c2.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c3.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c4.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c5.png" alt="1" />
      </div>
      <div class="item">
        <img src="../Pinterest/images/c6.png" alt="1" />
      </div>
    </div>
  </body>
</html>

下面是不加 1， break-inside: avoid; 2. height: 100%;overflow: auto; chrome中的效果

Red_Xx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css3瀑布流

Css3瀑布流具体属性就不过多介绍了，只简单说一下几个属性，在外层盒子上单独使用column-count: ‘列数(4)’; 代表内部盒子分为4列的形式，单独使用column-width：(宽度) 代表每一列的盒子宽为多少，如果这两个属性共同使用以column-count 为准，需要注意的是在c...
复制链接

扫一扫

专栏目录