ต่อไปนี้เป็นสิ่งที่ฉันแปล เป็นการแปลฟรีตามความเข้าใจของฉันในบทความ โปรดอย่าพบว่ามีข้อผิดพลาดในการแปล จุดประสงค์ของฉันคือเพียงเพื่อถ่ายทอดทักษะ CSS นี้
นักออกแบบเว็บไซต์จำนวนมากชอบวางคอนเทนเนอร์สองรายการขึ้นไปเคียงข้างกันที่ความสูงเท่ากัน และแสดงเนื้อหาของแต่ละคอนเทนเนอร์ภายใน เช่นเดียวกับเซลล์ในเค้าโครงตารางแบบคลาสสิกที่ควบคุมตำแหน่งของหลายคอลัมน์ พวกเขายังชอบความสะดวกของคอนเทนเนอร์อีกด้วย เนื้อหาจะแสดงอยู่กึ่งกลางหรือจัดชิดด้านบน
แต่คุณไม่ชอบใช้ตารางในการ Implement เลย ควรทำอย่างไร? มีหลายวิธีในการนำไปใช้ รวมถึงการใช้งานตามภาพลวงตา การใช้การควบคุม JS เพื่อทำให้ความสูงเท่ากัน และการใช้วิธีการซ่อนส่วนที่ล้นของคอนเทนเนอร์ และการรวมขอบเขตลบด้านล่างของคอลัมน์และด้านในที่เป็นบวก แพทช์เพื่อแก้ปัญหาความสูงของคอลัมน์เดียวกัน
ในความเป็นจริง มีวิธีง่ายๆ ซึ่งสามารถทำได้โดยใช้ display:table, display:table-row และ display:table-cell และคอนเทนเนอร์ที่มีความสูงน้อยจะปรับให้เข้ากับคอนเทนเนอร์ที่มีความสูงค่อนข้างสูง แต่ IE ไม่รองรับ คุณลักษณะนี้ เราไม่ตำหนิ IE ในตอนนี้ ฉันเชื่อว่ามันจะดีขึ้นในอนาคต ที่นี่ฉันทำแบบจำลอง
ดู โครงสร้างของ xhtml ก่อน:
<คลาส div=เท่ากับ>
<คลาส div=แถว>
<div class=หนึ่ง></div>
<div class=two></div>
<div class=three></div>
</div>
</div>
มันง่ายมากที่จะเข้าใจโดยไม่ต้องอธิบาย แต่นี่คือโครงสร้างตาราง มันคล้ายกันมากไหม?
<ตาราง>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</ตาราง>
นี่คือ CSS:
.เท่ากัน {
จอแสดงผล:ตาราง;
ชายแดนยุบ: แยก;
-
.แถว {
จอแสดงผล: ตาราง-แถว;
-
.แถว div {
จอแสดงผล: ตารางเซลล์;
-
.แถว .หนึ่ง {
ความกว้าง:200px;
-
.แถว .สอง {
ความกว้าง:200px;
-
.แถว .สาม {
-
อธิบาย: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 สามารถแสดงผลได้อย่างสมบูรณ์แบบหลังการทดสอบ