คำอธิบายโดยละเอียดของโซลูชันเค้าโครง html ที่ปรับเปลี่ยนได้ตรงกลางด้านซ้ายและขวาแบบคงที่

บทความนี้จะแนะนำคำอธิบายโดยละเอียดเกี่ยวกับโซลูชันเค้าโครง html แบบปรับได้ตรงกลางด้านซ้ายและขวาที่มีความกว้างคงที่ html และแบ่งปันกับทุกคนดังนี้:

โครงสร้าง html มีดังนี้

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //ระวังตรงนี้ก่อน องค์ประกอบลอยซ้ายและขวาจะถูกเรนเดอร์ก่อนที่จะเรนเดอร์องค์ประกอบตรงกลาง หลังจากที่องค์ประกอบถูกลอย องค์ประกอบระดับบล็อกพี่น้องที่เหลือจะครอบครองความกว้างขององค์ประกอบหลัก <style> .box{ height:200px; } .left{ float:left:300px } .right{ float:right ; ความกว้าง:300px; } </สไตล์>

โครงสร้าง html มีดังนี้

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //เหมือนกับรูปแบบลอยตัว , ขั้นแรกให้เรนเดอร์องค์ประกอบด้านซ้ายและขวาเพื่อให้วางตำแหน่งไว้ที่ปลายด้านซ้ายและขวาขององค์ประกอบหลัก และองค์ประกอบตรงกลางที่เหลือจะใช้ความกว้างที่เหลือขององค์ประกอบหลัก <style> .box{ ตำแหน่ง: สัมพัทธ์; } .left{ ตำแหน่ง: สัมบูรณ์; ความกว้าง: 0 100px; ; พื้นหลัง: สีแดง; </style>

การใส่องค์ประกอบหลัก display:table และองค์ประกอบลูก display:table-cell จะเปลี่ยนให้เป็นบล็อกแบบอินไลน์

ข้อดีของเค้าโครงนี้คือความเข้ากันได้ดี

 <div class=box> <div class=left> ซ้าย </div> <div class=center> กลาง </div> <div class=right> ขวา </div></div><style> .box{ แสดง : ตาราง; ความกว้าง: 100%; .left{ จอแสดงผล: ตารางเซลล์; ความกว้าง: 0; } .right{ ความกว้าง:100px; 100%; พื้นหลัง: สีแดง;

การแสดงองค์ประกอบหลัก: องค์ประกอบลูกดิ้นทั้งหมดจะถูกจัดเรียงเป็นแถว

ความกว้างของ flex:n ในองค์ประกอบลูกจะเป็นความกว้างขององค์ประกอบหลัก/n

ตัวอย่างเช่น flex:1 ความกว้างจะเท่ากับความสูงขององค์ประกอบหลัก

ข้อเสียของรูปแบบยืดหยุ่นคือความเข้ากันได้ไม่สูง ปัจจุบันเบราว์เซอร์ IE ไม่สามารถใช้รูปแบบยืดหยุ่นได้

 <div class=box> <div class=left> ซ้าย </div> <div class=center> กลาง </div> <div class=right> ขวา </div></div><style> .box{ แสดง : ดิ้น; ความกว้าง: 100%; } .left{ ความกว้าง: 100px; } .right{ ความกว้าง:100px;

การแสดงองค์ประกอบหลัก: grid;

ตารางแม่แบบคอลัมน์:100px อัตโนมัติ 100px;

ตามลำดับ ความกว้างขององค์ประกอบลูกแรกคือ 100px องค์ประกอบที่สองเป็นแบบปรับได้ และองค์ประกอบที่สามคือ 100px

ข้อดีของเค้าโครงตารางคือมันง่ายมากและถูกกำหนดโดยตรงจากสไตล์องค์ประกอบหลัก ข้อเสียคือความเข้ากันได้ไม่สูง

 <div class=box> <div class=left> ซ้าย </div> <div class=center> กลาง </div> <div class=right> ขวา </div></div><style> .box{ แสดง : ตาราง; ตารางเทมเพลตคอลัมน์: 100px อัตโนมัติ 100px; ความกว้าง: 100%;

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network