Có cách nào để căn chỉnh một phần tử với 'ông bà' của nó mà không cần jQuery/javascript không?

Question

Tôi cần căn chỉnh một phần tử với cạnh của 'ông bà' của nó.

Dưới đây là một ví dụ về mã:

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

Vì vậy, các yếu tố .parent sẽ được đặt inline mà sẽ phụ thuộc vào độ rộng của phần tử #grandparent. Tôi cần mỗi phần tử .child được đặt ở cạnh trái của #grandparent.

Bất kỳ cơ hội nào có thể xảy ra nếu không có javascript?

Answer 1

Chỉ định vị trí tương đối cho ông bà và vị trí tuyệt đối cho các phần tử con. Sau đó, sử dụng các thuộc tính trên cùng, bên trái, dưới, bên phải của các phần tử con (liên quan đến giới hạn của ông bà) để có được hiệu quả mong muốn của bạn.