Czy istnieje sposób wyrównania elementu do jego "grandparent" bez jQuery/javascript?

Question

Potrzebuję wyrównać element do krawędzi jego "dziadka".

Oto przykład kodu:

<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> 

Więc .parent elementy będą umieszczone inline, który zależy od szerokości elementu #grandparent. Potrzebuję każdego elementu .child do umieszczenia na lewej krawędzi #grandparent.

Jest szansa, że ​​jest to możliwe bez javascript?

Answer 1

Przypisanie położenia względnego do elementu nadrzędnego i położenie bezwzględne do elementów potomnych. Następnie użyj właściwości górnego, lewego, dolnego i prawego elementów dzieci (co jest w odniesieniu do granic dziadków), aby uzyskać pożądany efekt.