โอเคฉันมีปัญหาการจัดวางง่ายๆเมื่อหนึ่งหรือสองสัปดาห์ก่อน ส่วนต่างๆของหน้าที่ต้องการส่วนหัว:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
สิ่งที่ค่อนข้างเรียบง่าย สิ่งนี้คือความเกลียดชังตารางดูเหมือนจะถูกครอบงำในโลกของเว็บซึ่งฉันได้รับการเตือนเมื่อถามว่าทำไมต้องใช้แท็กรายการคำจำกัดความ (DL, DD, DT) สำหรับรูปแบบ HTML แทนตาราง ตอนนี้หัวข้อทั่วไปของตารางเทียบกับ divs / CSS ได้รับการกล่าวถึงก่อนหน้านี้เช่น:
- DIV เทียบกับตาราง ; และ
- ตารางแทน DIVs
ดังนั้นนี่จึงไม่ได้มีไว้เพื่อการสนทนาทั่วไปเกี่ยวกับ CSS เทียบกับตารางสำหรับเลย์เอาต์ นี่เป็นเพียงวิธีแก้ปัญหาเดียว ฉันลองใช้วิธีแก้ปัญหาต่างๆข้างต้นโดยใช้ CSS ได้แก่ :
- ลอยไปทางขวาสำหรับปุ่มหรือ div ที่มีปุ่ม
- ตำแหน่งที่สัมพันธ์กันสำหรับปุ่ม และ
- ตำแหน่งสัมพัทธ์ + ค่าสัมบูรณ์
ไม่มีวิธีแก้ปัญหาใดที่น่าพอใจด้วยเหตุผลที่แตกต่างกัน ตัวอย่างเช่นการวางตำแหน่งสัมพัทธ์ทำให้เกิดปัญหาดัชนี z ที่เมนูแบบเลื่อนลงของฉันปรากฏขึ้นใต้เนื้อหา
ดังนั้นฉันจึงกลับไปที่:
<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>
และทำงานได้อย่างสมบูรณ์ เป็นเรื่องง่ายที่เข้ากันได้แบบย้อนหลังเท่าที่จะทำได้ (ซึ่งอาจใช้งานได้แม้ใน IE5) และใช้งานได้จริง ไม่ยุ่งเกี่ยวกับการวางตำแหน่งหรือการลอยตัว
ใครสามารถเทียบเท่าโดยไม่มีตาราง?
ข้อกำหนดคือ:
- เข้ากันได้ย้อนหลัง:ถึง FF2 และ IE6;
- สอดคล้องกันอย่างสมเหตุสมผล:ในเบราว์เซอร์ต่างๆ
- กึ่งกลางแนวตั้ง:ปุ่มและชื่อเรื่องมีความสูงต่างกัน และ
- ยืดหยุ่น:ช่วยให้สามารถควบคุมตำแหน่ง (ช่องว่างภายในและ / หรือระยะขอบ) และการจัดแต่งทรงผมได้อย่างแม่นยำพอสมควร
ในบันทึกด้านข้างฉันเจอบทความที่น่าสนใจสองสามบทความในวันนี้:
แก้ไข:ให้ฉันอธิบายรายละเอียดเกี่ยวกับปัญหาการลอยตัว งานประเภทนี้:
<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>
ขอบคุณAnt Pสำหรับoverflow: hiddenส่วนนี้ (ยังไม่เข้าใจว่าทำไม) นี่คือจุดเริ่มต้นของปัญหาสมมติว่าฉันต้องการให้ชื่อและปุ่มอยู่ตรงกลางในแนวตั้ง นี่เป็นปัญหาเนื่องจากองค์ประกอบมีความสูงต่างกัน เปรียบเทียบสิ่งนี้กับ:
<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>
ซึ่งทำงานได้อย่างสมบูรณ์แบบ