搜索

首页  >  问答  >  正文

CSS:使用列数:3 时,在 2 列中呈现 4 个项目

我想创建一个 3 列的砖石布局来渲染具有相同宽度但不同高度的项目,但是当我尝试下面的代码时,我看到第三列是空的,这看起来有点奇怪。我能以某种方式修复它吗?

我尝试了这段代码,我希望第一列中有两个项目,第二列和第三列中有一个项目。请注意,4 个相同高度的项目只是一个具体情况,最终我不知道会有多少个项目以及每个项目的高度。

1

2

3

4

5

6

7

8

9

10

11

12

13

.container {

  column-count: 3;

  background-color: #f7f7f7;

  width: 588px

}

 

.item {

  width: 180px;

  height: 180px;

  break-inside: avoid;

  background-color: #e5e5e5;

  margin-bottom: 20px;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<div class="container">

  <div class="item">

    1

  </div>

  <div class="item">

    2

  </div>

  <div class="item">

    3

  </div>

  <div class="item">

    4

  </div>

</div>

P粉300541798P粉300541798560 天前598

全部回复(1)我来回复

  • P粉281089485

    P粉2810894852023-09-09 12:16:59

    对于这种情况,您可以将 display: flexflex-wrap: wrapjustify-content: space- Between 结合使用容器

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    .container {

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

      background-color: #f7f7f7;

      width: 588px

    }

     

    .item {

      width: 180px;

      height: 180px;

      break-inside: avoid;

      background-color: #e5e5e5;

      margin-bottom: 20px;

    }

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    <div class="container">

      <div class="item">

        1

      </div>

      <div class="item">

        2

      </div>

      <div class="item">

        3

      </div>

      <div class="item">

        4

      </div>

    </div>

    回复
    0
  • 取消回复