有沒有辦法將一個元素與其「祖父母」沒有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

指定祖父母的相對位置和子元素的絕對位置。然後使用兒童元素的頂部，左側，底部，右側屬性（這是關於祖父母邊界）來獲得您想要的效果。