相应地将一列中的元素与另一列中的元素垂直对齐

Question

我经常发现自己有两列布局，其中一列包含所有内容，另一列包含各种额外元素。这些需要有点固定在第一列中的特定段落以使其有意义。 example：

虽然看起来是三个连续的列，但它实际上是四个独立的行，每行有三列 - 也就是说，第一行包含库块，第一段和“1918”时间轴块;第二个包含偏移区域，第二个段落和“1925”块上方的图示，等等。

这种方法的优点是额外的内容片段（以下称“块”）与引用它们的段落垂直对齐，并且由于尺寸与列宽度成比例而响应。缺点是它根本不是语义，并且具有比主段更高的块将拉伸列的高度并在其下方添加空白区域（除非绝对定位，否则这些）。

我可以also make it a single 3-column row，将块添加到引用段落上方的主内容列中，然后绝对定位到外部列创建的空白区域中。这很好，因为它更加语义，但是块宽度不会反映Bootstrap网格定义的列宽，因此响应更加困难。

我可以做同样但put all the blocks one after another in each column，垂直定位底边（或相对定位），但这更难以做出响应，因为当中间列时，块之间的距离会在响应式布局中发生变化缩小或扩大。我可以在不同的断点处缩放文本以防止段落形状发生变化，但这可能会降低可读性，因为我需要缩小较小的设备。

有什么我想念的吗？换句话说，是否有一种干净，语义的方式来垂直定位元素以引用另一个元素？

Answer 1

这个插件可以回答你的问题吗？

http://leafo.net/sticky-kit/