时间戳

首页 > 解决方案 > 如何去除列之间的距离？

html - 如何去除列之间的距离？

问题描述

如何删除这些列之间的距离？也就是说，使第二列与元素 №2 相邻。

不为两列使用两个容器（因为元素的数量和大小会改变，但它们的高度应该最相似）。因而也不适合 max-height。body

body {
  display: inline-block;
  column-count: 2;
  border: 1px solid red;
}

.item {
  border: 1px solid #000;
  break-inside: avoid;
}
<div class="item" style="height:100px;width:80px">1</div>
<div class="item" style="height:80px;width:100px">2</div>
<div class="item" style="height:60px;width:60px">3</div>
<div class="item" style="height:100px;width:100px">4</div>
<div class="item" style="height:120px;width:120px">5</div>

标签： htmlcss

解决方案

添加column-rule: 0andcolumn-gap: 0会有所帮助，但是对于周围的 inline-block 容器的宽度，它仍然会有点奇怪。

Flexbox 将是使用列 flex-direction 的理想方式，如下所示：

body {
    display: flex;
    flex-direction: column;
    border: 1px solid red;
    max-width: 331px;
    flex-wrap: wrap;
    max-height: 320px;
    justify-content: flex-start;
    align-content: flex-start;
}

.item {
    border: 1px solid #000;
    break-inside: avoid;
    flex-basis: 100px;
}
<div class="item" style="height:100px;width:80px">1</div>
<div class="item" style="height:80px;width:100px">2</div>
<div class="item" style="height:60px;width:60px">3</div>
<div class="item" style="height:100px;width:100px">4</div>
<div class="item" style="height:120px;width:120px">5</div>

推荐阅读