javascript - 用元素和一致的间距填充固定宽度的网格

Question

<分区>

Answer 1

这是我的解决方案，用于一个 270 像素宽的盒子，里面装满了 60 像素宽的盒子。最下面一行的方框会展开以填满该行并且完美。调整边距和宽度以适合您的情况。

请注意，我的 HTML 包含 4 个表格以提供可视化示例。您显然只会使用一张 table 。

.table {
  display: table;
  width: 270px;
  background-color: lightblue;
}
.tr {
  display: table-row;
}
.td {
  float: left;
  background-color: cadetblue;
  width: 60px;
  height: 60px;
  margin-right: 10px;
  margin-bottom: 10px;
}

/* Remove margin on right edge and bottom edge */
.tr .td:last-of-type {
  margin-right: 0;
}
.tr:last-of-type .td {
  margin-bottom: 0;
}

/* This makes the last row of boxes fill the row */
.tr:last-of-type .td:nth-child(1):nth-last-child(1) {
  width: 270px;
}
.tr:last-of-type .td:nth-child(1):nth-last-child(2),
.tr:last-of-type .td:nth-child(2):nth-last-child(1) {
  width: 130px;
}
.tr:last-of-type .td:nth-child(1):nth-last-child(3),
.tr:last-of-type .td:nth-child(2):nth-last-child(2),
.tr:last-of-type .td:nth-child(3):nth-last-child(1) {
  width: 83.333333px;
}

<div class="table">
  <div class="tr">
    <div class="td">1</div>
    <div class="td">2</div>
    <div class="td">3</div>
    <div class="td">4</div>
  </div>
  <div class="tr">
    <div class="td">5</div>
    <div class="td">6</div>
    <div class="td">7</div>
    <div class="td">8</div>
  </div>
  <div class="tr">
    <div class="td">9</div>
  </div>
</div>
<br>
<br>
<div class="table">
  <div class="tr">
    <div class="td">1</div>
    <div class="td">2</div>
    <div class="td">3</div>
    <div class="td">4</div>
  </div>
  <div class="tr">
    <div class="td">5</div>
    <div class="td">6</div>
    <div class="td">7</div>
    <div class="td">8</div>
  </div>
  <div class="tr">
    <div class="td">9</div>
    <div class="td">10</div>
  </div>
</div>
<br>
<br>
<div class="table">
  <div class="tr">
    <div class="td">1</div>
    <div class="td">2</div>
    <div class="td">3</div>
    <div class="td">4</div>
  </div>
  <div class="tr">
    <div class="td">5</div>
    <div class="td">6</div>
    <div class="td">7</div>
    <div class="td">8</div>
  </div>
  <div class="tr">
    <div class="td">9</div>
    <div class="td">10</div>
    <div class="td">11</div>
  </div>
</div>
<br>
<br>
<div class="table">
  <div class="tr">
    <div class="td">1</div>
    <div class="td">2</div>
    <div class="td">3</div>
    <div class="td">4</div>
  </div>
  <div class="tr">
    <div class="td">5</div>
    <div class="td">6</div>
    <div class="td">7</div>
    <div class="td">8</div>
  </div>
  <div class="tr">
    <div class="td">9</div>
    <div class="td">10</div>
    <div class="td">11</div>
    <div class="td">12</div>
  </div>
</div>