บทความบทนำของ wulin.com (www.vevb.com): CSS3+HTML5 Notes การศึกษาหมายเหตุ 4-CSS สามคอลัมน์-ความกว้างของคอลัมน์เท่านั้น
ในอดีตเมื่อทำเลย์เอาต์สามคอลัมน์วิธีที่พบบ่อยที่สุดและง่ายที่สุดอาจเป็น: การใช้ Float+Margin เพื่อนำไปใช้ ในยุคของ CSS3 เราอาจมีวิธีการที่ทันสมัยอีกวิธีหนึ่งซึ่งเป็นโมเดลกล่องใน CSS3 ด้วยรหัสดังนี้:
เค้าโครงสามคอลัมน์ CSS3 CSS3 เลย์เอาต์สามคอลัมน์ Middleleftrightผลการดำเนินงานภายใต้ Google Chrome มีดังนี้:
สรุป: แอตทริบิวต์ Box-Flex ส่วนใหญ่จะใช้ที่นี่ แอตทริบิวต์นี้ส่วนใหญ่อนุญาตให้คอนเทนเนอร์เด็กแบ่งความกว้างตามกฎบางอย่างที่สัมพันธ์กับคอนเทนเนอร์หลัก หากคอนเทนเนอร์เด็กทั้งสามตั้งค่า Box-Flex เป็น 1, 2 และ 3 ตามลำดับตู้คอนเทนเนอร์เด็กสามตัวจะแบ่งความกว้างตามอัตราส่วน 1: 2: 3
แน่นอนว่าคอนเทนเนอร์หลักจะต้องถูกตั้งค่าให้เป็นแบบจำลองกล่องเพื่อดูเอฟเฟกต์เช่นการแสดงผล: -webkit-box; แสดง: -moz-box;
อย่างไรก็ตามหากคุณเรียกใช้รหัสด้านบนโดยตรงไม่มีปัญหาใน Chrome แต่เมื่อพูดถึง Firefox มันจะกลายเป็นดังต่อไปนี้:
นี่คือบั๊ก Firefox หรือไม่? ในขั้นต้นความกว้างของด้านซ้ายและขวาได้รับการแก้ไข แต่ความกว้างที่อยู่ตรงกลางไม่มีความกว้างปรับตัว หลังจากสื่อสารกับผู้เขียน "คู่มือผู้มีสิทธิ์ไปยัง HTML5 และ CSS3" ฉันรู้ว่าสถานการณ์นี้เกิดขึ้นเนื่องจากความกว้างของคอนเทนเนอร์แม่ไม่ได้ถูกตั้งค่า เพียงเพิ่มความกว้าง: 100% ไปยังคอนเทนเนอร์หลัก - - ขอบคุณผู้เขียน "HTM5 และ CSS3 คู่มือผู้ให้สิทธิ์" ...