如何根据内容ID对边栏元素进行对齐

Question

我希望显示侧栏元素与提到的Id的主要内容对齐，而不是仅仅在侧栏中一个接一个地堆叠。这就是我希望带有提到的Id的侧边栏元素与主要帖子内容中提到的某些id标签一致。 以下是图像中基本结构的外观：http://bit.ly/1tbOHEY

我还希望侧边栏元素在侧边栏使用媒体查询在移动平台中消失时与内容保持一致，这样这些元素就不会随着移动平台中的侧边栏消失。

我可以对齐东西，但我不知道如何针对id或类进行这种类型的有针对性的对齐。一个例子非常有用（jsfiddle）。非常感谢提前:)

Answer 1

这是一个古老的问题，但是我花了几个小时一直在寻找解决这个问题的方法。我可以找到我的，而我则基于原始的小提琴。 我相信它可以做得更好，更清洁。毕竟我还是菜鸟。

我添加了所需的JS：

var el_from = document.getElementById("alignwithme1")
var rect = el_from.getBoundingClientRect();
var el_to = document.getElementById("se1")
new_style = "position: absolute; width:270px; top: " + rect.top + "px;"
/* console.log(new_style)
displays: position: absolute; width:270px; top: 55px; */
el_to.style= new_style;

el_from = document.getElementById("alignwithme2")
rect = el_from.getBoundingClientRect();
el_to = document.getElementById("se2")
new_style = "position: absolute; width:270px; top: " + rect.top + "px;"
/* console.log(new_style)
displays: position: absolute; width:270px; top: 278px; */
el_to.style= new_style;

这里是the fiddle。

它基于对DOM中某个项目的finding the position的流行解决方案，建议使用getBoundingClientRect()。 然后，为需要与原始元素关联的元素计算新的定位样式（1），然后应用它。

我还找不到如何使两个细节完美的方法，即：

1. 将宽度调整为所需的尺寸，因为通过应用 position: absolute width: auto似乎不再起作用
2. 对齐方式似乎有点不匹配，但是我 不知道它来自哪里。