Есть ли способ выровнять элемент с его «grandparent» без 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

Назначьте относительное положение для бабушки и дедушки и абсолютное положение для дочерних элементов. Затем используйте верхние, левые, нижние и правые свойства дочерних элементов (что касается границ бабушки и дедушки), чтобы получить желаемый эффект.