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