两个div并排布局失效：已尝试float和display:inline-block均无效果

问题根源 #

• 选择器不匹配：CSS中使用了类选择器.lineCounter、.englishDiv，但HTML对应元素用的是id属性，所以写的布局样式完全没有生效。
• 布局逻辑冲突：父容器设置了text-align: center，但浮动元素脱离普通文档流，不受text-align属性控制，无法实现englishDiv居中的效果。

解决方案 #

无需调整HTML结构，仅修改CSS即可实现需求：

* {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  box-sizing: border-box;
  margin: 0;
  background: #f2f3f4;
}

#standardTranslationMasterDiv {
  /* 新增相对定位作为子元素绝对定位的参照 */
  position: relative;
  text-align: center;
  float: left;
  height: 75vh;
  width: 32.66vw;
  padding-top: 5vh;
}

/* 修正为id选择器 */
#lineCounter {
  /* 绝对定位贴靠父容器最左侧，不占用正常文档流空间 */
  position: absolute;
  left: 0;
}

/* 修正为id选择器 */
#englishDiv {
  /* 设为行内块元素，可继承父容器的居中属性 */
  display: inline-block;
}

效果说明 #

调整后：

• lineCounter的数字会完全贴在standardTranslationMasterDiv的最左侧
• englishDiv的英文句子会在父容器内水平居中，不受左侧数字的布局影响

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