纯css实现左右两栏的瀑布流布局

最新推荐文章于 2024-07-24 15:34:54 发布

面壁思过程

最新推荐文章于 2024-07-24 15:34:54 发布

阅读量7.2k

点赞数 3

文章标签：左右两栏布局纯css瀑布流

本文链接：https://blog.csdn.net/Candy_mi/article/details/86468264

版权

html+css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

图下：

关键css:

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>左右两栏布局</title>
    <style>
      .container {
        width: 80%;
        margin: 0 auto;
      }

      .waterfall {
        -moz-column-count: 2; /* Firefox */
        -webkit-column-count: 2; /* Safari �� Chrome */
        column-count: 2;      /* 将 div 元素中的文本分为2列，并规定列间1rem像素的间隔。 */
        -moz-column-gap: 1em;
        -webkit-column-gap: 1em;
        column-gap: 1em;
      }

      .item {
        /* width: 40%; */
        padding: 1em;
        margin: 0 0 1em 0;
        -moz-page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        break-inside: avoid;   /*break-inside: avoid; 避免元素内部断行并产生新列*/
        border: 1px solid #000;
      }
      .item img {
        width: 40%;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="waterfall">
        <div class="item">
          <img
            src="https://imgsa.baidu.com/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=f3d4063328738bd4d02cba63c0e2ecb3/a2cc7cd98d1001e910616de1be0e7bec55e797fa.jpg"
          />
          <p>1 convallis timestamp</p>
        </div>

        <div class="item">
          <img
            src="https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=03948ea9b4315c60579863bdecd8a076/8326cffc1e178a825a6b5d1cfe03738da977e833.jpg"
          />
          <p>2 convallis timestamp 2 Donec a fermentum nisi.</p>
        </div>

        <div class="item">
          <img
            src="https://imgsa.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=3d645bf2d0ca7bcb6976cf7ddf600006/6d81800a19d8bc3efe5f64fb858ba61ea8d345af.jpg"
          />
          <p>
            3 Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus
            suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam
            mauris suscipit.
          </p>
        </div>

        <div class="item">
          <img
            src="https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=fbc3501b0a087bf469e15fbb93ba3c49/bf096b63f6246b60ea65dd24e3f81a4c510fa273.jpg"
          />
          <p>
            4 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis
            vitae, egestas at augue.
          </p>
        </div>

        <div class="item">
          <img
            src="https://imgsa.baidu.com/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=9fe1d71697ef76c6c4dff379fc7f969f/b03533fa828ba61ed2efcd184634970a304e5987.jpg"
          />
          <p>
            5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis
            vitae, egestas at augue.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>