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 요소의 왼쪽 가장자리에 각 .child 요소가 있어야합니다.

자바 스크립트가없는 경우 가능합니다.

Answer 1

상대 위치를 조부모에 지정하고 절대 위치를 자식 요소에 할당합니다. 그런 다음 원하는 효과를 얻으려면 어린이 요소의 위쪽, 왼쪽, 아래쪽, 오른쪽 속성 (조부모 경계와 관련됨)을 사용합니다.