有没有办法在没有jQuery/javascript的情况下将元素与其"祖父母"对齐？

Question

我需要将一个元素对齐到它的'祖父母'的边缘.

这是代码的示例:

<div id='grandparent'>
  <div class='parent' style='display:inline-block'>
    <div class='child'></div>
  </div>
  <div class='parent' style='display:inline-block'>
    <div class='child'></div>
  </div>
  <div class='parent' style='display:inline-block'>
    <div class='child'></div>
  </div>
  <div class='parent' style='display:inline-block'>
    <div class='child'></div>
  </div>
</div>

因此.parent元素将被内联定位,这取决于#grandparent元素的宽度.我需要将每个.child元素定位到#grandparent的左边缘.

没有javascript,这有可能吗？

Answer 1

为祖元素分配相对位置，为子元素分配绝对位置。然后使用子元素的 top、left、bottom、right 属性（相对于祖父母边界）来获得所需的效果。