如何使用HTML和CSS实现多列布局顶部对齐、起始高度一致

所需修改说明 #

你当前的问题核心是inline-block元素默认采用基线对齐规则，导致高度不同的列顶部无法对齐，仅需要2处小修改即可实现需求：

1. 给所有列容器（你当前代码中设置了display: inline-block的div）新增vertical-align: top属性，强制所有列从顶部开始对齐
2. 给列容器新增overflow: hidden属性，清除容器内部底部右浮动的p标签带来的浮动高度计算异常问题

修改后的CSS样式部分代码如下：

<style>
    div{
        display:inline-block;
        vertical-align: top; /* 新增顶部对齐规则 */
        overflow: hidden; /* 新增清除内部浮动规则 */
    }
    li{
        padding-bottom:10px;
    }
</style>

修改完成后即可实现三个列顶部起始高度完全对齐，列高度自动跟随内部内容高度变化的效果。

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