如何使用HTML与CSS实现树形排列的卡片布局？

调整后的CSS代码 #

.ranking-section {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}
.ranking-section .card {
  border: none;
  float: left;
  padding: 0 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
}
/* 第一行：单个卡片居中，尺寸和其余卡片保持一致 */
.ranking-section .card:nth-child(1) {
  width: 25%;
  float: none;
  margin: 0 auto 20px;
  clear: both;
}
/* 第二行：两个卡片并排，各占半行宽度 */
.ranking-section .card:nth-child(2),
.ranking-section .card:nth-child(3) {
  width: 50%;
}
/* 第三行及之后：所有卡片宽度25%，每行默认排放4个 */
.ranking-section .card:nth-child(n+4) {
  width: 25%;
}
/* 强制第四个卡片换行，开启第三行 */
.ranking-section .card:nth-child(4) {
  clear: both;
}

/* 若需要第三行所有卡片统一放在同一行不换行，可替换上面两段规则为以下代码：
.ranking-section {
  white-space: normal;
}
.ranking-section::after {
  content: '';
  display: block;
  clear: both;
}
.ranking-section .card:nth-child(n+4) {
  width: 25%;
  float: none;
  display: inline-block;
}
.ranking-section .card:nth-child(4) {
  clear: both;
  margin-left: 0;
}
.ranking-section .card:nth-child(n+4) ~ .card {
  white-space: nowrap;
}
*/

规则说明 #

• 无需修改原有HTML结构，仅调整CSS即可实现需求
• 新增box-sizing: border-box规则，避免padding导致的宽度溢出计算错误
• 通过nth-child选择器精准匹配不同位置的卡片，不需要额外添加row容器做分区
• 第一行卡片默认和其余卡片尺寸一致、居中显示；如果需要第一行卡片占满整行，可将nth-child(1)的宽度改为100%，单独控制内部内容居中即可
• 第三行默认每行放4个卡片自动换行，若需要所有剩余卡片都放在同一行，可使用注释内的替换规则，配合横向滚动即可实现

内容的提问来源于stack exchange，提问作者Paresh Bhanderi