在 CSS 中跨列对齐文本基线

Question

我面临着多列布局的CSS实现，它将第二列的第一行（可能有不同的字体大小）与第一列的第二行对齐。像这样：

（彩色背景和突出显示的基线用于说明目的。）

第一列始终包含已知字体、行高和粗细的两行。

第二列可能包含标题、段落、图像等。它将以段落或

h2

开头。

第二栏将受 CMS 控制，编辑者可能随时进行更改，即在第一次迭代中以段落开头，但稍后可能会更改为

h2

，也可能会更改回来。

编辑者最好只在第二列中使用普通的

h2

和

p

标签，而不需要内联 CSS。分配像

<p class="top_align">

或类似的类可能没问题。

限制：

• 我必须用纯 CSS 来解决它，我不能使用任何 JavaScript 或 CSS 预处理器。
• 该解决方案必须在桌面设备、桌面操作系统和桌面浏览器上保持像素完美。移动布局不是问题。
• 该解决方案在放大到 300% 时仍然有效。

我已经做了相当多的 CSS 工作，但从来没有做过这种跨列基线对齐。我知道CSS中有一些与基线相关的规则，但我没有看到也没有找到任何对当前容器之外的基线的参考技术。

我的想法是，第二列必须以某种方式知道第二条基线到第一列顶部的距离，然后根据行高调整第一段或标题的顶部填充，以匹配那个距离。

考虑到我的限制，这可能吗？

我该如何开始解决这个问题？

Answer 1

您可以使用

line-height

属性使元素跨越 2 行。如果将其设置为

2em

，则高度将为 2 行。请记住重置默认内边距和边距。

/* reset default margin */
p, h2 {
  margin: 0;
}


/* setting the line height of the first element on the right side */
.right :first-child {
  line-height: 2em;
}



/* just for visualizsation purpose */
.container {
  display: flex;
}

.inner-container {
  border: 2px dashed red;
  padding: 0.5em;
}

<div class="container">
  <div class="inner-container left">
    <p>First Line</p>
    <p>Second Line</p>
  </div>
  <div class="inner-container right">
    <h2>Headline</h2>
  </div>
</div>