CSS:使用列数:3 时,在 2 列中呈现 4 个项目
P粉300541798
P粉300541798 2023-09-08 19:54:21
[CSS3讨论组]

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

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

.container {
  column-count: 3;
  background-color: #f7f7f7;
  width: 588px
}

.item {
  width: 180px;
  height: 180px;
  break-inside: avoid;
  background-color: #e5e5e5;
  margin-bottom: 20px;
}
<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粉300541798
P粉300541798

全部回复(1)
P粉281089485

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

.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;
}
<div class="container">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
  <div class="item">
    3
  </div>
  <div class="item">
    4
  </div>
</div>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号