Tôi có thể định vị một phần tử ở cuối vùng chứa của nó trong Firefox bằng cách nào?

Tôi có một ô trong bảng và tôi muốn một div trong đó luôn nằm ở góc dưới cùng bên trái. Các công trình sau đây tốt trong IE và Safari, nhưng Firefox được định vị hoàn toàn trên trang, không nằm trong ô (mã dựa trên giải pháp giải pháp here). Tôi đã thử nghiệm cả khi có và không có DTD, điều này đặt Firefox ở chế độ Quirks và chế độ Chuẩn, và không hoạt động đúng cách. Tôi bị kẹt - bất kỳ ý tưởng nào?Tôi có thể định vị một phần tử ở cuối vùng chứa của nó trong Firefox bằng cách nào?

<!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; } 
     th, td { vertical-align: top; border:1px solid black; position:relative; } 
     th { width:100px; } 
     .manage { text-align:right; position:absolute; bottom:0; right:0; } 
     </style> 
    </head> 
    <body > 
    <table> 
     <tr> 
      <th>Some info about the following thing and this is actually going to span a few lines</th> 
      <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td> 
     </tr> 
     <tr> 
      <th>Some info about the following thing and this is actually going to span a few lines</th> 
      <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td> 
     </tr> 
    </table> 
    </body> 
</html>

Nguồn

2008-11-14 Chris Marasti-Georg

Bạn đã tìm ra cách để thực hiện việc này chưa? – Alex

@jitbit Tôi không có. –

Rất tiếc khi biết rằng ... cuối cùng tôi đã thêm một đường viền mới "" để giữ nội dung dưới cùng. – Alex

Xem điều này có phù hợp với bạn hay không. Không chắc chắn về độ chính xác của vấn đề nhưng nó có liên quan đến việc sử dụng td với định vị tương đối. Tôi bọc bảng bằng thẻ div và định vị nó tương đối và dường như làm những gì bạn muốn.

<!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; } 
     th, td { vertical-align: top; border:1px solid black; } 
     th { width:100px; } 
     div.body {position:relative; width:500px;} 
     .manage { text-align:right; position:absolute; bottom:0; right:0; display:block} 
     </style> 
    </head> 
    <body > 
    <div class="body"><table> 
     <tr> 
       <th>Some info about the following thing and this is actually going to span a few lines</th> 
       <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td> 
     </tr> 
    </table></div> 
    </body> 
</html>

Nguồn

2008-11-14 15:15:31

Thật không may, điều này phá vỡ khi tôi thêm một hàng khác vào bảng trông giống nhau. –

position: relative dường như không được hỗ trợ toàn cầu cho thẻ td. Tôi không thể tìm thấy các nguồn dứt khoát.

Bạn có thể muốn đặt khối div vào số td với kích thước mong muốn và áp dụng position: relative cho thay vào đó.

Nguồn

2008-11-14 15:17:41 Lasar

Thử điều này, tôi không thể lấy div để điền vào td. –

Điều này nghe có vẻ thực sự rõ ràng, nhưng bạn đã thử sử dụng vertical-align: bottom; trong .manage?

Nguồn

2008-11-14 15:18:15 Powerlord

Theo W3C, position: relative không ảnh hưởng đến các tế bào bảng:

"Hiệu quả của việc 'position: relative' trên bảng hàng nhóm, table-header-nhóm, bảng -footer-group, table-row, bảng-cột-nhóm, bảng-cột, ô bảng và các phần tử chú thích bảng không xác định. "

Giải pháp là thêm div gói thêm vào ô bảng.

EDIT: Div này yêu cầu height:100% và position:relative; để được đặt.

<table> 
    <tr> 
     <td> 
      <div style="position:relative;height:100%;"> 
       Normal inline content. 
       <div class="manage">your absolute-positioned content</div> 
      </div> 
     </td> 
    </tr> 
</table>

Nguồn

2008-11-14 15:20:48

Điều đó không đẩy nó xuống phía dưới: ( –

ví dụ mã đã chỉnh sửa ngay bây giờ. Tôi đã thử nghiệm điều này trong Firefox 3 và nó hoạt động –

Trong FF3, điều này không được đẩy xuống đáy cho tôi. Http: //i36.tinypic. com/znqxpv.jpg –

có DIV bên trong TD có chiều rộng: 100% và chiều cao: 100%, sau đó đặt thành vị trí: tương đối.

Nguồn

2008-11-14 15:36:21 jishi

Điều này không hoạt động - div bên trong không bị đẩy xuống đáy. –

Phải, vị trí: tương đối không có hiệu lực đối với các phần tử bảng và firefox áp dụng quy tắc này. Các giải pháp của các công trình div, nhưng đây là đánh dấu khủng khiếp trong quan điểm của tôi.

Bạn có hoàn toàn cần sử dụng bảng để hiển thị nội dung này không? (Hoặc là nó tương đối?)

Nếu không, tại sao bạn không sử dụng các phần tử div và làm những gì bạn muốn?

Để sử dụng bảng cho các vấn đề bố trí rất 1998 ...

Nguồn

2008-11-14 15:36:57 alexmeia

Dữ liệu tôi đang hiển thị là Một cột hiển thị c ontext cho nhận xét, cột khác hiển thị nhận xét. Tại sao lại sử dụng một phần tử không có ý nghĩa ngữ nghĩa khi một ngữ nghĩa phong phú được cung cấp, phù hợp với trường hợp của tôi? –

Ok, nhưng một danh sách định nghĩa (dl) thay vì một bảng có thể là một giải pháp ngữ nghĩa là tốt. – alexmeia

Chúng không thực sự là định nghĩa. Có cách nào để đảm bảo cả dt và dd ở cùng độ cao với thay đổi nội dung không? –

Đặt một display:block trên bàn và bây giờ FF tôn trọng vị trí: tương đối.

Nguồn

2010-07-20 15:20:08 Wouter

+1 điều này chắc chắn làm cho nó hoạt động! – Frankie

Trong FF18, điều này làm cho bảng không duy trì chiều rộng của nó, và các phần tử được đặt hoàn toàn trên cha mẹ bù của bảng (trong trường hợp này, cửa sổ) –

Tôi có thể định vị một phần tử ở cuối vùng chứa của nó trong Firefox bằng cách nào?

Trả lời

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