电子书双列全宽布局优化咨询：支持内容换行与阅读器兼容

问题背景 #

格式化电子书时需要实现以下布局：

• 正文文本两端对齐
• 中间插入全宽两列布局，两列内容均左对齐，第二列紧贴右侧页面边框

当前使用table实现时，因设置nowrap导致字体放大或页面宽度缩小时，内容无法换行，出现重叠或溢出，影响阅读。需要一种支持内容自动换行、适配电子书阅读器的方案，且必须保留内容的左右、上下顺序以兼容文本语音（TTS）软件（不能仅实现视觉效果）。

解决方案：用Flexbox实现自适应布局 #

保留原内容的阅读顺序（每行先左列后右列），用Flex容器替代table，既保证TTS读取逻辑正确，又支持内容自适应换行。

修改后的HTML代码 #

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula,
ipsum accumsan sollicitudin mollis, leo est porttitor lacus, id facilisis
tellus lacus blandit metus. Aenean imperdiet in eros facilisis mollis.</p>

<div class="two-column-wrapper">
  <div class="row">
    <div class="col-left">Great-grandson of Alexios III</div>
    <div class="col-right">Son of Michael VIII</div>
  </div>
  <div class="row">
    <div class="col-left">Son and co-ruler of Andronikos II</div>
    <div class="col-right">Son of Michael IX</div>
  </div>
  <div class="row">
    <div class="col-left">Son of Andronikos III</div>
    <div class="col-right">Son of John V</div>
  </div>
</div>

<p>Aliquam quam eros, eleifend vel erat ut, eleifend laoreet quam. Phasellus
euismod ex pellentesque lacus auctor, malesuada efficitur nunc pharetra.
Aliquam ut condimentum neque. Suspendisse ornare nibh non nisi pharetra,
ac porttitor sapien venenatis. Suspendisse potenti.</p>

修改后的CSS代码 #

p {
  text-align: justify;
}

.two-column-wrapper {
  width: 100%;
  margin: 1em 0; /* 可选：添加上下间距区分正文 */
}

.row {
  display: flex;
  justify-content: space-between; /* 让两列分别靠左右对齐 */
  margin-bottom: 0.5em; /* 可选：行之间的间距 */
}

.col-left {
  flex: 1; /* 左列占据剩余空间，内容自动换行 */
  margin-right: 1em; /* 可选：两列之间的最小间距 */
}

.col-right {
  /* 若右列需要换行，删除下方white-space规则即可 */
  white-space: nowrap;
  text-align: left; /* 确保右列内容左对齐 */
}

方案优势 #

1. TTS兼容性：HTML结构严格遵循“左列→右列→下一行”的阅读顺序，TTS软件会按正常逻辑读取内容。
2. 自适应换行：左列通过flex:1填充剩余宽度，内容会根据页面宽度自动换行；右列若需换行，只需移除white-space: nowrap规则。
3. 布局稳定性：justify-content: space-between确保右列始终紧贴右侧边框，两列间不会出现重叠。
4. 阅读器适配：Flexbox是主流现代CSS布局方式，绝大多数电子书阅读器（如Kindle、Kobo、Apple Books）均支持，兼容性优于table的复杂样式设置。

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