有没有办法在没有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元素将被定位为内联的，这将取决于#祖父母元素的宽度。我需要将每个。child元素定位到#祖父母的左边缘。

没有javascript，这是可能的吗?

Answer 1

为父元素指定相对位置，为子元素指定绝对位置。然后使用子元素的top, left, bottom, right属性(这是相对于祖父母的界限)来获得您想要的效果。