นักออกแบบเว็บไซต์จำนวนมากชอบวางคอนเทนเนอร์สองรายการขึ้นไปเคียงข้างกันที่ความสูงเท่ากัน และแสดงเนื้อหาของแต่ละคอนเทนเนอร์ภายใน เช่นเดียวกับเซลล์ในเค้าโครงตารางแบบคลาสสิกที่ควบคุมตำแหน่งของหลายคอลัมน์ พวกเขายังชอบความสะดวกของคอนเทนเนอร์อีกด้วย เนื้อหาจะแสดงอยู่กึ่งกลางหรือจัดชิดด้านบน
แต่คุณไม่ชอบใช้ตารางในการ Implement เลย ควรทำอย่างไร? มีหลายวิธีในการนำไปใช้ รวมถึงการใช้งานตามภาพลวงตา การใช้การควบคุม JS เพื่อทำให้ความสูงเท่ากัน และการใช้วิธีการซ่อนส่วนที่ล้นของคอนเทนเนอร์ และการรวมขอบเขตลบด้านล่างของคอลัมน์และด้านในที่เป็นบวก แพทช์เพื่อแก้ปัญหาความสูงของคอลัมน์เดียวกัน
ในความเป็นจริง มีวิธีง่ายๆ ซึ่งสามารถทำได้โดยใช้ display:table, display:table-row และ display:table-cell และคอนเทนเนอร์ที่มีความสูงน้อยจะปรับให้เข้ากับคอนเทนเนอร์ที่มีความสูงค่อนข้างสูง แต่ IE ไม่รองรับ คุณลักษณะนี้ เราไม่ตำหนิ IE ในตอนนี้ ฉันเชื่อว่ามันจะดีขึ้นในอนาคต ที่นี่ฉันทำแบบจำลอง
มาดูโครงสร้างของ xhtml กันก่อน:
| <ระดับ div="เท่ากับ"> ＜คลาส div="แถว" > ＜คลาส div="หนึ่ง" > ＜/ div > ＜div class="two"></div> ＜div class="three"></div> ＜/div>< ＜/div>< |
มันง่ายมากที่จะเข้าใจโดยไม่ต้องอธิบาย แต่นี่คือโครงสร้างตาราง มันคล้ายกันมากไหม?
| <ตาราง> <tr> <td></td> <td></td> <td></td> </tr> ＜/โต๊ะ>< |
นี่คือ CSS:
เท่ากัน { - |
1.dispaly:table; ให้ layer.equal แสดงเป็นตารางขององค์ประกอบระดับบล็อก กล่าวคือ ถือเป็นตาราง
2.border-collapse:separate; เส้นขอบมีความเป็นอิสระ เช่นเดียวกับก่อนที่ตารางจะรวมเซลล์
3.display:table-row; แสดง .row เป็นแถวตาราง tr
4.display:table-cell; แสดง div รองของ .row เป็นเซลล์ตาราง td
5. จากนั้นกำหนดความกว้าง
Border-spacing:10px; ยังใช้เพื่อแยกความแตกต่างหลายช่อง ตามที่ระบุไว้ข้างต้น ไม่สามารถแสดงได้ตามปกติภายใต้ IE แต่เป็น: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8 b และ Netscape 7.1 สามารถแสดงผลได้อย่างสมบูรณ์แบบหลังการทดสอบ