我们有这个HTML和CSS代码.这包含装有不同尺寸div个 children 的容器div.

.cont {
  background-color: red;
  width: 1000px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.item1 {
  background-color: orange;
  width: 100px;
  height: 110px;
  margin: 5px;
}

.item2 {
  background-color: pink;
  width: 100px;
  height: 50px;
  margin: 5px;
}
<div class='cont'> 
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item2"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item2"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
</div>

这将导致:

enter image description here

正如您所看到的,行之间有很大的空间或间隙.如何删除它?

提前感谢.

推荐答案

你应该使用align-content,但却使用了align-items.

CSS align-content属性沿着弹性框的十字轴或网格或块级元素的块轴设置内容项之间及其周围的空间分布.

.cont {
  background-color: red;
  width: 1000px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.item1 {
  background-color: orange;
  width: 100px;
  height: 110px;
  margin: 5px;
}

.item2 {
  background-color: pink;
  width: 100px;
  height: 50px;
  margin: 5px;
}
<div class='cont'> 
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item2"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item2"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
</div>

Html相关问答推荐

如何使用css实现悬停时的动画zoom ?

对称渐变作为背景

在CSS中旋转排除的蒙版图像

防止position:relative的child在出界时收缩

HTMLTag属性内的svelte+TS类型声明

Vutify中看不见的V行

在R中从网页上的特定iframe中提取图形数据

阴影部分内部的ionic Select 元素

我在桌面版 html css 代码上给出了位置 margin-left margin-top 标签,如何将其删除到手机上以使其响应?

理解图像与其内容框之间的关系

如何从 div 内的图像中删除填充而不从其他所有内容中删除填充?

水平填充容器内的空间

如何让一个 div 元素粘在另一个元素上?

在 SQL 中合并 HTML 表中的单元格

有没有办法使用 CSS border-radius 创建 HTML 视频标签的三角形显示?

在中心而不是边界处填充 svg 的背景

根据百分比用多种 colored颜色 填充SVG路径

使用 bootstrap-icons 的未排序图标堆栈

Angular Material Hide Password 在输入时切换

所有幻灯片上的 Quarto RevealJS 标题