ขั้นแรก คลิกที่นี่เพื่อดูผลการทำงานจริง หน้านี้สามารถปรับให้อยู่ตรงกลางและปรับเปลี่ยนได้สูงในเบราว์เซอร์ Mozilla, opera และ IE มาวิเคราะห์โค้ดกัน:
รหัสที่สมบูรณ์
<html>
<หัว>
<style type="text/css">
ร่างกาย{
พื้นหลัง:#999;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
สี: #333;
ตระกูลแบบอักษร:arial,verdana,sans-serif;
-
#ส่วนหัว{
ความกว้าง:776px;
ขอบขวา: อัตโนมัติ;
ขอบซ้าย: อัตโนมัติ;
ช่องว่างภายใน: 0px;
พื้นหลัง: #EEE;
ความสูง:60px;
การจัดแนวข้อความ: ซ้าย;
} #บรรจุ{
ขอบขวา: อัตโนมัติ;
ขอบซ้าย: อัตโนมัติ;
ความกว้าง: 776px;
} #mainbg{
ความกว้าง:776px;
ช่องว่างภายใน: 0px;
พื้นหลัง: #60A179;
ลอย: ซ้าย;
-
#ขวา{
ลอย: ขวา;
ระยะขอบ: 2px 0px 2px 0px;
ช่องว่างภายใน:0px;
ความกว้าง: 574px;
พื้นหลัง: #ccd2de;
การจัดแนวข้อความ: ซ้าย;
-
#ซ้าย{
ลอย: ซ้าย;
ระยะขอบ: 2px 2px 0px 0px;
ช่องว่างภายใน: 0px;
พื้นหลัง: #F2F3F7;
ความกว้าง: 200px;
การจัดแนวข้อความ: ซ้าย;
-
#ส่วนท้าย{
ชัดเจน:ทั้งสอง;
ความกว้าง:776px;
ขอบขวา: อัตโนมัติ;
ขอบซ้าย: อัตโนมัติ;
ช่องว่างภายใน: 0px;
พื้นหลัง: #EEE;
ความสูง:60px;}
.text{ระยะขอบ:0px;ช่องว่างภายใน:20px;}
</สไตล์>
</หัว>
<ร่างกาย>
<div id="header">ส่วนหัว</div>
<div id="มี">
<div id="mainbg">
<div id="ขวา">
<div
class="text">ขวา<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div >
</div>
<div id="ซ้าย">
<div class="text">ซ้าย</div>
</div>
</div>
</div>
<div id="footer">ส่วนท้าย</div>
</ร่างกาย>
</html>
ถัดไป ให้กำหนดคอลัมน์กลางสองคอลัมน์ #right และ #left เพื่อที่จะจัดคอลัมน์กลางทั้งสองให้อยู่ตรงกลาง เราจะซ้อนเลเยอร์ #contain ไว้ด้านนอก และตั้งค่า Margin:auto; เพื่อบรรจุ เพื่อให้ #right และ #left อยู่ตรงกลางตามธรรมชาติ
ให้ความสนใจกับลำดับคำจำกัดความของสองคอลัมน์ตรงกลาง ก่อนอื่นเรากำหนด #right แล้วปล่อยให้มันลอยอยู่ทางด้านขวาสุดของเลเยอร์ #contain ผ่าน float: right; จากนั้นกำหนด #left แล้วปล่อยให้ลอยไปทางซ้ายของเลเยอร์ #right ผ่าน float: left; นี่เป็นสิ่งที่ตรงกันข้ามกับลำดับที่เรากำหนดตารางจากซ้ายไปขวา (การแก้ไข: ซ้ายก่อนแล้วขวา หรือขวาก่อนแล้วซ้าย คุณสามารถออกแบบได้ตามความต้องการของคุณเอง)
เราเห็นว่ามีเลเยอร์ #mainbg ซ้อนกันระหว่าง #contain และทั้งสองคอลัมน์ในโค้ด เลเยอร์นี้ใช้เพื่อกำหนดพื้นหลังของ #contain คุณจะต้องถามอย่างแน่นอนว่าทำไมไม่กำหนดพื้นหลังโดยตรงใน #contain แต่เพิ่มอีกเลเยอร์หนึ่งล่ะ นั่นเป็นเพราะว่าพื้นหลังที่กำหนดโดยตรงใน #contain จะไม่แสดงใน mozilla และจะต้องกำหนดค่าความสูง หากมีการกำหนดค่าความสูง เลเยอร์ #right จะไม่สามารถปรับขนาดตามเนื้อหาได้โดยอัตโนมัติ เพื่อที่จะแก้ปัญหาพื้นหลังและความสูง จำเป็นต้องเพิ่มเลเยอร์ #mainbg ดังกล่าว เคล็ดลับคือการกำหนด float: left; สำหรับเลเยอร์ #mainbh เนื่องจาก float จะให้แอตทริบิวต์ความกว้างและความสูงของเลเยอร์โดยอัตโนมัติ (เรามาทำความเข้าใจด้วยวิธีนี้ในขณะนี้ :)
สุดท้าย ให้กำหนดเลเยอร์ #footer ที่ด้านล่าง กุญแจสำคัญในคำจำกัดความนี้คือ: clear:both; ฟังก์ชันของประโยคนี้คือการยกเลิกมรดกแบบลอยตัวของเลเยอร์ #footer มิฉะนั้น คุณจะเห็น #footer แสดงถัดจาก #header แทนที่จะอยู่ใต้ #right
เมื่อกำหนดเลเยอร์หลักแล้ว เค้าโครงก็พร้อม อีกประเด็นหนึ่ง: คุณเห็นว่าฉันได้กำหนด .text{margin:0px;padding:20px;} ด้วย หน้าที่ของคลาสนี้คือการสร้างระยะขอบ 20px รอบๆ เนื้อหา ทำไมไม่กำหนดระยะขอบหรือช่องว่างภายในโดยตรงใน #right เนื่องจาก Mozilla และ IE มีการตีความโมเดลกล่อง CSS ที่ไม่สอดคล้องกัน การกำหนดระยะขอบ/ช่องว่างภายในโดยตรงจะทำให้เกิดความผิดปกติของเค้าโครงใน Mozilla ฉันมักจะแก้ปัญหาด้วยการใส่อีกชั้นเข้าไปข้างใน