Html 将一列中的元素与另一列中的元素进行响应性垂直对齐

我经常发现自己有两列布局，其中一列包含所有内容，另一列包含各种额外元素。这些需要在某种程度上锚定到第一列中的特定段落，以便有意义。安：

虽然它看起来是三个连续的列，但实际上它是四个独立的行，每个行有三列——也就是说，第一行包含画廊块、第一段和“1918”时间线块；第二个包含偏移区域、第二段和“1925”块上方的插图等

这种方法的优点是，额外的内容块（以下简称“块”）与引用它们的段落垂直对齐，并且由于大小与列宽成比例而响应。缺点是它完全没有语义，如果块比主要段落高，则会拉伸列的高度，并在其下方添加空格（除非绝对定位，这些都是）

我可以，将块添加到引用段落上面的主要内容栏中，然后绝对定位到由外部列创建的空白空间。这是好的，因为它更具语义，但坏的是块宽度不能反映由引导的网格定义的列宽，因此更难做出响应

我也可以这样做，但是，垂直放置底部边距（或相对放置），但这更难做出响应，因为当中心柱变窄或加宽时，块之间的距离将在响应布局中发生变化。我可以在不同的断点处缩放文本，以防止段落形状发生变化，但这可能会降低可读性，因为我需要在较小的设备上进行缩放

---

我有什么遗漏吗？换句话说，有没有一种干净的、语义上的方法来垂直定位一个元素与另一个元素的关系？

这个插件能回答您的问题吗

---

此外，如果这是一个更好的StackOverflow问题，请将其移到那里。谢谢唯一可以相对于另一个元素定位元素的方法是，如果一个元素是另一个元素的子元素。我个人会选择让每一部分都有自己的三个专栏，Shi Shannon，谢谢你的回复！唉，我不确定这是否会达到我所希望的效果——我不希望元素是固定位置的，我希望它们是静态的，即随页面滚动。我还感觉到，我会遇到与第二个示例相同的问题——这些块不会响应。