css 实现一行盒子 高度大小以最大尺寸为准

如果您想要在一行中放置多个盒子，并使它们的高度大小基于最大尺寸的盒子，则可以使用以下 CSS：

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 33.33%;
  box-sizing: border-box;
  padding: 20px;
}

/* 获取每行最大的高度 */
.container::after {
  content: "";
  display: table;
  clear: both;
}


/* 设置每个盒子的高度 */
.container {
  align-items: stretch;
}

.box {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}
@media only screen and (min-width: 600px) {
  .box {
    width: 25%;
  }
}

@media only screen and (min-width: 900px) {
  .box {
    width: 20%;
  }
}

这里使用了Flex布局来实现一行中放置多个盒子。通过将 display 属性设置为 flex，并将 flex-wrap 属性设置为 wrap，可以使每个盒子都占据整个可用空间，并在宽度不够时将其移到下一行。

为了使每个盒子的高度大小以最大尺寸为准，我们需要获取每行最大的高度，然后将每个盒子的高度设置为该值。为此，我们使用了伪元素 ::after 和 align-items: stretch; 来让每个盒子垂直拉伸以匹配最高盒子的高度。

同时，我们还将每个盒子的 display 属性设置为 flex，并使用 flex-grow: 1; 将内容部分的高度拉伸以匹配父容器的高度。

最后，我们根据需要使用媒体查询来调整盒子的宽度，并确保每个盒子都有适当的内边距和盒模型大小。

效果如下：