有没有办法在没有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属性（相对于祖父母边界）来获得所需的效果。