inline-block元素没有对齐的解决方案及总结

2021/7/6 23:36:34

本文主要是介绍inline-block元素没有对齐的解决方案及总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

问题代码:

<div id="frame" style="margin-bottom: 50px">
    <div class="item">test</div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<style>
     .item {
        display: inline-block;
        width: 180px;
        height: 100px;
        background-color: yellow;
     }
</style>

表现如下:

解决办法(两种):

  1. 分别为.item元素设置 vertical-align: top;vertical-align: middle;vertical-align: bottom;

  2. 分别为.item元素设置 overflow: hidden;

解决后表现如下:

问题原因

The baseline of an 'inline-table' is the baseline of the first row of the table.

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

以上解释来自于: https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

以上解释第二条翻译: 一个inline-block元素,如果里面没有inline内联元素,或者overflow不是visible,则该元素的基线就是其margin底边缘,否则,其基线就是元素里面最后一行内联元素的基线。

我们知道,inline-block元素 vertical-align 默认值为 baseline,关于inline-block的baseline属性,网上解释的文章一大堆,解释的也比较详细,我会在文章下方给出链接。我们的布局问题代码中基线为

参考资料

  • display为inline-block的元素有内容和没有内容情况下高度不一致的问题

  • https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

  • How to fix CSS layout problems?

  • CSS深入理解vertical-align和line-height的基友关系

  • CSS float浮动的深入研究、详解及拓展(一)

  • CSS中vertical-align的默认值baseline的理解

  • css overflow hidden increases height of container



这篇关于inline-block元素没有对齐的解决方案及总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程