html - 有没有办法在没有 jQuery/javascript 的情况下将元素与其 'grandparent' 对齐？

Question

我需要将元素与其“祖 parent ”的边缘对齐。

代码示例如下:

<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

为祖父元素分配一个相对位置，为子元素分配一个绝对位置。然后使用子元素的上、左、下、右属性(相对于祖 parent 边界)来获得您想要的效果。