Làm thế nào để đặt div bên trong div khác đến vị trí tuyệt đối?

Question

Ví dụ: tôi muốn tạo mẫu như trong hình bên dưới.

Làm thế nào để bạn định vị mỗi div bên trong các container để vị trí tuyệt đối của nó? Tôi thích mà không cần sử dụng các thuộc tính float. Bất kỳ ví dụ ngắn sẽ được đánh giá cao.

Answer 1

Bạn có thể sử dụng absolute và relative vị.

ví dụ

html

<div id="container" class="box"> 
    <div class="box top left"></div> 
    <div class="box top center"></div> 
    <div class="box top right"></div> 

    <div class="box middle left"></div> 
    <div class="box middle center"></div> 
    <div class="box middle right"></div> 

    <div class="box bottom left"></div> 
    <div class="box bottom center"></div> 
    <div class="box bottom right"></div> 
</div> 

css

#container{ 
    width:200px; 
    height:200px; 
    position:relative; 
    border:1px solid black; 
} 
.box{ 
    border:1px solid red; 
    position:absolute; 
    width:20px; 
    height:20px;  
} 

.top{top:0} 
.middle{top:50%;margin-top:-10px;/*half of the .box height*/} 
.bottom{bottom:0} 

.left{left:0;} 
.center{left:50%;margin-left:-10px;/*half of the .box width*/} 
.right{right:0;} 

Demo tạihttp://jsfiddle.net/gaby/MB4Fd/1/

(ofcourse bạn có thể điều chỉnh vị trí thực tế theo sở thích của mình, bằng cách thay đổi giá trị trên cùng/trái/phải/dưới)

Answer 2

Sử dụng position: relative; trên vùng chứa (<div> chứa tất cả nội dung) và hoàn toàn định vị các phần tử con. Các phần tử con bên trong vùng chứa sẽ được định vị tương đối so với vùng chứa, vì vậy sẽ dễ dàng để sắp xếp mọi thứ theo nhu cầu của bạn.

Tuy nhiên, Bạn nên sử dụng định vị trong hầu hết các trường hợp để đặt trang web của mình .. Tôi khuyên bạn nên sử dụng phao mặc dù bạn không muốn, bạn sẽ có tính nhất quán hơn trên các trình duyệt khác nhau .

đọc this bài viết nếu bạn đang nhầm lẫn về nổi