Ok, tôi đã gặp sự cố đơn giản về bố cục một hoặc hai tuần trước. Cụ thể là các phần của trang cần có tiêu đề:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+Công cụ khá đơn giản. Điều đó là sự căm ghét bảng dường như đã chiếm lĩnh thế giới Web, điều mà tôi đã được nhắc đến khi tôi hỏi Tại sao lại sử dụng thẻ danh sách định nghĩa (DL, DD, DT) cho các biểu mẫu HTML thay vì bảng? Bây giờ chủ đề chung của bảng so với divs / CSS trước đây đã được thảo luận, ví dụ:
- DIV vs Bảng ; và
- Các bảng thay vì DIV .
Vì vậy, đây không phải là một cuộc thảo luận chung về CSS và bảng để bố trí. Đây chỉ đơn giản là giải pháp cho một vấn đề. Tôi đã thử các giải pháp khác nhau cho vấn đề trên bằng cách sử dụng CSS bao gồm:
- Phao bên phải cho nút hoặc một div chứa nút;
- Định vị tương đối cho nút; và
- Vị trí tương đối + tuyệt đối.
Không có giải pháp nào trong số này là thỏa đáng vì các lý do khác nhau. Ví dụ: vị trí tương đối dẫn đến sự cố chỉ mục z trong đó menu thả xuống của tôi xuất hiện bên dưới nội dung.
Vì vậy, tôi đã kết thúc việc quay lại:
<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
<td class="group-title">Title</td>
<td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>Và nó hoạt động hoàn hảo. Nó đơn giản, như khả năng tương thích ngược (có thể sẽ hoạt động ngay cả trên IE5) và nó chỉ hoạt động. Không gây rối với định vị hoặc phao.
Vì vậy, bất cứ ai có thể làm tương đương mà không có bảng?
Các yêu cầu là:
- Tương thích ngược: tới FF2 và IE6;
- Nhất quán hợp lý: trên các trình duyệt khác nhau;
- Căn giữa theo chiều dọc: nút và tiêu đề có độ cao khác nhau; và
- Linh hoạt: cho phép kiểm soát chính xác một cách hợp lý đối với vị trí (đệm và / hoặc lề) và kiểu dáng.
Ngoài ra, tôi đã xem qua một số bài viết thú vị ngày hôm nay:
CHỈNH SỬA: Hãy để tôi nói rõ hơn về vấn đề float. Loại công trình này:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-title { float: left; padding: 8px; }
.group-buttons { float: right; padding: 8px; }
</style>
</head>
<body>
<div class="group-header">
<div class="group-title">This is my title</div>
<div class="group-buttons"><input type="button" value="Collapse"></div>
</div>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>Cảm ơn Ant P về overflow: hiddenmột phần (mặc dù vẫn không hiểu tại sao). Đây là nơi mà vấn đề xuất hiện. Giả sử tôi muốn tiêu đề và nút được căn giữa theo chiều dọc. Đây là vấn đề vì các phần tử có chiều cao khác nhau. So sánh cái này với:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-header td { vertical-align: middle; }
.group-title { padding: 8px; }
.group-buttons { text-align: right; }
</style>
</head>
<body>
<table class="group-header">
<tr>
<td class="group-title">This is my title</td>
<td class="group-buttons"><input type="button" value="Collapse"></td>
</tr>
</table>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>hoạt động hoàn hảo.