HTML/CSS设置display:inline-block后元素无法并排显示问题排查

问题根本原因 #

• .container 样式的 width 和 height 属性缺少单位，你只写了数值 640、482，没有添加像素单位 px，浏览器无法识别有效宽度，容器默认会占满父级的100%宽度，自然无法并排。
• 你提供的CSS代码中#img2的样式末尾缺少闭合大括号}，属于语法错误，也会导致后续样式不生效。
• 额外的不规范问题：同一HTML页面中id属性必须唯一，你重复使用了id="img1"、id="img2"，会导致选择器匹配异常，建议改为class属性。

修复方案 #

1. 补全.container的宽高单位，可额外添加vertical-align: top避免对齐错位：

.container {
    position: relative;
    width: 640px;
    height: 482px;
    display: inline-block;
    vertical-align: top;
}

2. 补全#img2的样式闭合大括号：

#img2 {
    position: absolute;
    height: 220px;
    width: 640px;
    top: 262px;
}

3. 可选优化：如果修复后发现两个.container之间有多余间隙，是inline-block元素默认的HTML空白字符导致的，可以把两个.container的HTML代码写在同一行，或者给两个.container的父元素添加font-size: 0的样式即可消除间隙。

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