html - 如何根据内容 ID 对齐边栏元素

Question

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

当侧边栏在移动平台上使用媒体查询消失时，我还希望侧边栏元素与内容对齐，这样这些元素就不会随着侧边栏在移动平台上消失。

我可以对齐东西，但我不知道如何针对 ID 或类进行这种类型的有针对性的对齐。一个例子将非常有帮助(jsfiddle)。非常感谢 :)

Answer 1

这是一个有点老的问题，但几个小时以来我一直在寻找这个主题的解决方案。我可以找到我的，我基于原来的 fiddle 。我相信它可以做得更好、更干净。毕竟我还是菜鸟。

我添加了所需的 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 .

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

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

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