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

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

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

在一段 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 布局来解决。

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容