2010-08-26 38 views
9

tôi đang cố gắng sắp thẳng đứng một div bên trong một div khác ở dưới cùng và tôi không muốn sử dụng vị trí tương đối/tuyệt đối. dưới đây là đánh dấu của tôi. có vẻ như nó hoạt động. nhưng tôi không chắc liệu đây có phải là giải pháp tốt nhất hay không. bất cứ ai có thể giới thiệu một cách tốt hơn? cũng, trong FF nếu tôi loại bỏ các biên giới xung quanh container, nó ngừng hoạt động. có ai biết tại sao không? nhờ Konstantincố gắng sắp xếp theo chiều dọc div bên trong div


<html> 
<head> 
    <style type="text/css"> 
     .container 
     { 
      background-color: #ffff00; 
      height: 100px; 
      line-height: 100px; 
      border: solid 1px #666666; 
     } 
     .container .content 
     { 
      margin-top: 60px; 
      background-color: #ffbbbb; 
      height: 40px; 
      line-height: 40px; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="content">test</div> 
    </div> 
</body> 
</html> 

Trả lời

27

Sử dụng vị trí tuyệt đối. Tôi nghĩ có thể lý do bạn không muốn sử dụng định vị tuyệt đối dựa trên quan niệm sai lầm. Cụ thể, nếu chứa có các thuộc tính vị trí là tốt, vị trí tuyệt đối sẽ không liên quan đến toàn bộ trang, nhưng liên quan đến các container, và sau đó bạn sẽ có được những gì bạn muốn với:

.container 
{ 
    position: relative; 
} 

.container .content 
{ 
    position: absolute; 
    bottom: 0px; 
} 

Bây giờ, không có vấn đề kích thước, nội dung của bạn sẽ được ở dưới cùng của container.

+0

Tôi đã sử dụng tính năng này. Cảm ơn bạn. và đồng thời tôi muốn căn chỉnh nó ở trung tâm. Làm thế nào để làm điều đó ? –

1

Điều đó sẽ làm việc ... chỉ có điều là bạn sẽ không thể đặt bất cứ điều gì trong rỗng top 60 pixel.

0

Tôi tin rằng nếu bạn đang tìm kiếm giải pháp tốt nhất, bạn thực sự nên sử dụng vị trí tương đối/tuyệt đối.

Có lý do cụ thể nào khiến bạn đang cố tránh vị trí tương đối/tuyệt đối không?

Các vấn đề liên quan