การจัดย่อหน้าในตารางที่มีความกว้างบล็อกอัตโนมัติใน CSS
สมมติว่าเรามีตารางที่มีบล็อกสี่บล็อกในหนึ่งแถว:
.child {
width: 25%;
}
เรามาเพิ่มระยะห่าง (margin) ให้กับบล็อกของเราเป็นเปอร์เซ็นต์ ทั้งในแนวนอนและแนวตั้งกัน:
.child {
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
สิ่งที่เราทำไปจะยังทำงานไม่ถูกต้อง
เพราะความกว้างรวมของบล็อกและระยะห่าง
มากกว่า 100% เพื่อให้ทำงานถูกต้อง
เราต้องตัดบางส่วนออกจากแต่ละบล็อก
เพื่อให้มีพื้นที่สำหรับระยะห่างของเรา
เรามาคำนวณส่วนที่ต้องตัดนี้กัน
ในกรณีของเรา ปรากฏว่ามีบล็อกสี่บล็อก และมีระยะห่างระหว่างพวกเขาสามระยะ - ระยะละหนึ่งเปอร์เซ็นต์ครึ่ง ในการคำนวณส่วนที่ต้องหักออก คุณต้อง หารระยะห่างรวมด้วย จำนวนบล็อก:
1.5% * 3 / 4 = 1.125
จากนั้นความกว้างของแต่ละบล็อกจะเท่ากับ:
25% - 1.5% * 3 / 4 = 23.875%
โค้ดที่ได้จะเป็นดังนี้:
.child {
width: 23.875%;
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
เราไม่จำเป็นต้องคำนวณระยะห่างนี้ด้วยตัวเอง แต่สามารถมอบหมาย
งานการคำนวณให้กับฟังก์ชัน calc:
.child {
width: calc(25% - 1.5% * 3 / 4);
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
ให้ฟังก์ชัน calc คำนวณความกว้างของบล็อกด้วย:
.child {
width: calc(100% / 4 - 1.5% * 3 / 4);
margin-right: 1.5%;
margin-bottom: 1.5%;
}
.child:nth-child(4n) {
margin-right: 0;
}
กำหนดความกว้างของบล็อกเป็นเปอร์เซ็นต์ เพื่อให้
ในตารางมีบล็อกสามบล็อกในหนึ่งแถว และระหว่างพวกมัน
มีระยะห่าง 3%
กำหนดความกว้างของบล็อกเป็นเปอร์เซ็นต์ เพื่อให้
ในตารางมีบล็อกหกบล็อกในหนึ่งแถว และระหว่าง
พวกมันมีระยะห่าง 0.5%
กำหนดความกว้างของบล็อกเป็นเปอร์เซ็นต์ เพื่อให้
ในตารางมีบล็อกสี่บล็อกในหนึ่งแถว และระหว่าง
บล็อกมีระยะห่าง 30px
กำหนดความกว้างของบล็อกเป็นเปอร์เซ็นต์ เพื่อให้
ในตารางมีบล็อกห้าบล็อกในหนึ่งแถว และระหว่าง
บล็อกมีระยะห่าง 50px