使用CSS relative/absolute定位实现两个div内文本并排不生效问题

• 块级元素默认特性：div 属于块级元素，默认会独占一行，即使你通过 position: relative 调整了水平偏移量，元素本身在正常文档流中的占位还是保留原来的上下行位置，不会主动和其他块级元素并排。
• CSS类名语法不规范：CSS 规范要求类选择器不能以数字开头，你写的 .123、.456 不符合语法规则，部分浏览器会无法识别对应的样式规则，导致样式不生效。
• 定位逻辑错误：position: relative 的 left 属性只是让元素视觉上发生偏移，不会改变元素本身的占位宽度，你给第一个元素设置 left: 1% 之后，它的原始占位还是在最左侧，第二个元素的 left:30% 是基于自身原始位置（第一行下方）的偏移，自然无法和第一个元素对齐并排。

可以用Flex布局实现需求，首先把类名改为合法格式（以字母开头），比如改成 box123 和 box456，代码示例如下：

<!-- 新增外层父容器 -->
<div class="container">
  <div class="box123">
    <b>This is a title</b>
  </div>
  <div class="box456">
    This is some text
  </div>
</div>

.container {
  display: flex;
  /* 可选：顶部对齐，避免字号差异导致错位 */
  align-items: flex-start;
  gap: 1%; /* 替代你原来的左侧间距需求 */
}
.box123 {
  width: 30%;
  font-family: Arial, sans-serif;
  font-size: 400%;
}
.box456 {
  width: 70%;
  font-family: Arial, sans-serif;
  line-height: 200%;
}

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