2008-11-14 33 views
12

Để theo dõi this question về định vị tuyệt đối bên trong ô bảng, tôi đang cố gắng tìm một thứ gì đó hoạt động trong Firefox. Một lần nữa, tôi có khoảng 95% ở đó, và chỉ có một điều nhỏ khiến tôi không thể tuyên bố chiến thắng. Sử dụng đánh dấu mẫu theo sau:Làm thế nào tôi có thể nhận được một div để điền vào một ô bảng theo chiều dọc?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
     table { width:500px; border-collapse:collapse} 
     th, td { border:1px solid black; vertical-align: top; } 
     th { width:100px; } 
     td { background:#ccc; } 
     .wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; } 
     .manage { text-align:right; position:absolute; bottom:0; right:0; } 
     p{ margin: 0 0 5px 0; } 
     </style> 
    </head> 
    <body > 
    <table> 
     <tr> 
       <th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th> 
       <td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td> 
     </tr> 
     <tr> 
       <th>Cras diam.</th> 
       <td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td> 
     </tr> 
     <tr> 
       <th>Cras diam.</th> 
       <td><div class="wrap"><p>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero. Sed elementum. Praesent porta, tellus ut dictum ullamcorper, est ante condimentum metus, non molestie lorem turpis in sapien. Aenean id enim. Nullam placerat blandit ante. Aenean ac ligula.</p><div class="manage">Edit | Delete</div></div></td> 
     </tr> 
    </table> 
    </body> 
</html> 

Làm cách nào để có được div bọc luôn lấp đầy ô, sao cho vùng quản lý nằm ở dưới cùng của ô? Và vâng, dữ liệu mà tôi đưa vào bảng là (trong tâm trí của tôi) bảng, vì vậy tôi muốn sử dụng một bảng ở đây. Như một phương sách cuối cùng, tôi có thể chuyển sang một giải pháp div lồng nhau xấu xí, nhưng kể từ khi một bảng là ngữ nghĩa chính xác ở đây tôi muốn sử dụng một nếu có thể. Lưu ý rằng màu nền đơn giản chỉ hiển thị kích thước tương đối của các phần tử - tôi không quan tâm đến nền cho bố cục của mình. Cũng lưu ý rằng tôi muốn các ô có chiều cao linh hoạt, để chúng chỉ mở rộng đủ để vừa với nội dung của chúng.

Trả lời

0

Bạn chỉ đang cố gắng để có được backrground để phù hợp với cùng một màu sắc? và không căn chỉnh, sau đó bạn có thể sử dụng hình nền trong css để tạo ra hiệu ứng tương tự, cos FF không hiển thị phần tử tới 100% bên trong một vùng chứa. Nếu vùng chứa được đặt ở chiều cao tự động, thì con sẽ được đặt thành tự động. Việc làm cho kết xuất nhanh hơn.

Vì vậy, đặt cược tốt nhất sẽ là hình nền css.

+0

Không, tôi cần phải nhận được quản lý div xuống đáy của tế bào trong Firefox. Các hình nền chỉ có để hiển thị các yếu tố lớn như thế nào. –

1

Bạn có thể đặt (giống nhau) chiều cao cố định trên ô trong bảng & bọc div thusly:

<style type="text/css"> 
table { width:500px; border-collapse:collapse} 
th, td { height:200px; border:1px solid black; vertical-align: top; } 
th { width:100px; } 
td { background:#ccc; } 
.wrap { position:relative; height:200px; padding-bottom:1em; background:#aaa; } 
.manage { text-align:right; position:absolute; bottom:0; right:0; } 
p{ margin: 0 0 5px 0; } 
</style> 
+3

Tôi không biết mỗi hàng sẽ cao bao nhiêu ... Tôi muốn để bố cục linh hoạt, để các ô chỉ cao bằng nội dung yêu cầu. –

+0

Tôi không nghĩ rằng nó có thể có bất kỳ cách nào khác, vì vậy có lẽ bạn có thể làm một cái gì đó như đếm số lượng tối đa của các nhân vật trong mỗi hàng bằng cách sử dụng PHP và sau đó thiết lập một chiều cao hàng nội tuyến hoặc một cái gì đó? – da5id

+0

@ da5id đếm là công thức cho thảm họa, như trong không gian nơi người ta có thể phù hợp với 10 'i' ký tự chỉ có 5' m' ký tự sẽ phù hợp. – ANeves

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