การจัดย่อหน้าในตารางที่มีความกว้างบล็อกอัตโนมัติใน CSS

สมมติว่าเรามีตารางที่มีบล็อกสี่บล็อกในหนึ่งแถว:

css.child {
  width: 25%;
}

เรามาเพิ่มระยะห่าง (margin) ให้กับบล็อกของเราเป็นเปอร์เซ็นต์ ทั้งในแนวนอนและแนวตั้งกัน:

css.child {
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

สิ่งที่เราทำไปจะยังทำงานไม่ถูกต้อง เพราะความกว้างรวมของบล็อกและระยะห่าง มากกว่า 100% เพื่อให้ทำงานถูกต้อง เราต้องตัดบางส่วนออกจากแต่ละบล็อก เพื่อให้มีพื้นที่สำหรับระยะห่างของเรา เรามาคำนวณส่วนที่ต้องตัดนี้กัน

ในกรณีของเรา ปรากฏว่ามีบล็อกสี่บล็อก และมีระยะห่างระหว่างพวกเขาสามระยะ - ระยะละหนึ่งเปอร์เซ็นต์ครึ่ง ในการคำนวณส่วนที่ต้องหักออก คุณต้อง หารระยะห่างรวมด้วย จำนวนบล็อก:

จากนั้นความกว้างของแต่ละบล็อกจะเท่ากับ:

โค้ดที่ได้จะเป็นดังนี้:

css.child {
  width: 23.875%;
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

เราไม่จำเป็นต้องคำนวณระยะห่างนี้ด้วยตัวเอง แต่สามารถมอบหมาย งานการคำนวณให้กับฟังก์ชัน calc:

css.child {
  width: calc(25% - 1.5% * 3 / 4);
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

ให้ฟังก์ชัน calc คำนวณความกว้างของบล็อกด้วย:

css.child {
  width: calc(100% / 4 - 1.5% * 3 / 4);
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}