宽度不固定的容器中，如何解决边距塌陷失效并实现盒子与容器下边缘对齐？

本篇文章给大家分享《宽度不固定的容器中，如何解决边距塌陷失效并实现盒子与容器下边缘对齐？》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

如何解决宽度不固定的容器中边距塌陷失效的问题

在一段 html 代码中，存在一个宽度不固定的灰色容器，其中包含 n 个固定宽高的 div 盒子。这些盒子均设置了右边距和下边距，但希望最下面的两个盒子的下边缘与灰色容器的下边缘对齐。

起初，尝试使用 css 的边距塌陷，但在这种布局中无效。也尝试了给最下面的两个盒子单独设置 margin-bottom: 0，但由于灰色容器宽度不固定，最下层盒子的数量不确定，这种方法不可行。

之所以边距塌陷失效，是因为 margin 合并被破坏了。当使用 inline-block 作为元素的容器时，会禁用 margin 合并。

为了实现预期的布局，可以使用 flex 搭配 gap 属性：

.main {
  width: 700px;
  margin: 100px auto;
  background-color: #efefef;
}

.d1 {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
}

.d2 {
  width: 100px;
  height: 100px;
  border: 1px solid #f00;
}

gap 属性可以实现盒子的间距，而 flex-wrap 属性允许盒子换行。

需要注意的是，gap in flex 存在兼容性问题，可以使用 grid 布局来解决。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。