การจัดย่อหน้าในตารางที่มีความกว้างบล็อกอัตโนมัติใน 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