C'è un modo per allineare un elemento al suo 'nonno' senza jQuery/javascript?

Question

Ho bisogno di allineare un elemento al bordo del suo 'nonno'.

Ecco un esempio del codice:

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

Così gli elementi .parent stanno per essere in linea posizionate che dipende dalla larghezza dell'elemento #grandparent. Ho bisogno che ogni elemento .child sia posizionato sul lato sinistro di #grandparent.

Ogni possibilità è possibile senza javascript?

Answer 1

Assegna una posizione relativa al nonno e una posizione assoluta agli elementi figlio. Quindi usa le proprietà superiore, sinistra, inferiore, destra degli elementi figli (che è rispetto ai limiti dei nonni) per ottenere l'effetto desiderato.