如何让两个设置为inline-block的div元素实现高度相等

问题原因 #

你遇到的顶部空白是inline-block元素的默认对齐规则导致的：inline-block元素默认的vertical-align属性值为baseline，会让多个并排元素按照文本基线对齐，当元素高度不一致时，较矮的元素会自动下沉，顶部就会出现空白区域。且inline-block本身没有自动等高的特性，无法直接让较矮元素填满父容器高度。

解决方案 #

方案1：改用Flex布局（最推荐，原生支持等高） #

Flex布局的子元素默认就会自动拉伸填满父容器高度，天然适配你的需求，修改成本很低：

1. 给父容器添加display: flex属性，可选添加justify-content: space-between自动处理两个子元素的间距，不需要手动卡49.5%的宽度
2. 移除子元素的display: inline-block属性即可

修改后的CSS代码示例：

* {
    padding: 0;
    margin: 0;
}
/* 父容器样式 */
.parent {
    display: flex;
    /* 可选：自动分散对齐两个子元素，省去宽度计算 */
    justify-content: space-between;
}
.box {
    width: 49.5%;
    background-color: yellow;
}

对应的HTML给父容器加个类名即可：

<div class="parent"> 
    <div class="box"> Dummy txt </div>
    <div class="box"> Dumy txt 2               klmdflggmdfvlvlldfkvdlv.d v.dvdf.vdf b,df.b 
        ,dfb,dfbdf,bdfbdfb.dfbdfbdf,bmdf bdf,bdfb,dfbdf,mbd,m vd,vd vd,vdmv dvmdv ,dv ddf,dm 
        vd,vmd vd,vdvdv,dmv df,vmdfvd,vdvm dv,dv d,v</div>
    </div>
</div>

方案2：保留inline-block，手动对齐+等高 #

如果必须保留inline-block的布局方式，可以分两步修改：

1. 给.box添加vertical-align: top属性，解决顶部对齐的问题，消除顶部空白
2. 可配合JS获取较高子元素的高度，手动赋值给较矮的子元素实现等高，不过适配性不如Flex布局

修改后的CSS仅需新增一行属性即可解决顶部空白问题：

.box {
    display: inline-block;
    width: 49.5%;
    background-color: yellow;
    /* 新增对齐规则 */
    vertical-align: top;
}

内容的提问来源于stack exchange，提问作者shreyak jain