html - 响应式垂直对齐一列中的元素与另一列中的元素

Question

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

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

这种方法的优点是，额外的内容片段(以下简称“ block ”)与引用它们的段落垂直对齐，并且由于其大小与列宽成比例而具有响应性。缺点是它根本不是语义的，并且 block 比主段落高会拉伸(stretch)列的高度并在其下方添加空白(除非绝对定位，否则这些是)。

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

我也可以这样做，但是 put all the blocks one after another in each column , 垂直放置并带有底部边距(或相对放置)，但是当中心列变窄或变宽时，响应式布局中 block 之间的距离会发生变化，这更难做出响应。我可以在不同的断点处缩放文本以防止段落形状发生变化，但这可能会降低可读性，因为我需要在较小的设备上缩小。

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

Answer 1

这个插件能解决你的问题吗？

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