Html 纯CSS等高独立嵌套容器

CSS的“等高列”、“圣杯”布局、

display:table cell

的巧妙实现，当然还有一些美味的

display:flex

创意，尤其是在这里

但我正在努力实现我在其他任何地方都找不到的东西，如果不使用JS，我就无法实现，我宁愿避免使用JS

我试图创建一组高度相等的父容器，每个容器都有一组子元素，这些子元素在卡片之间共享高度。每个卡通过槽与相邻卡隔开。显然，我不能发布图片，因为我是新来的，但这更容易直观地解释。这里有一个免费图片托管网站的链接：

在图中，您将看到三个卡（1、2、3），每个卡都有三个部分（1a、1b、1c、2a、2b、2c、3a、3b、3c）。卡中的每个部分的高度与其他卡中的等效部分相同（即1b=2b=3b、1c=2c=3c等）。每个等效截面（如1b、2b和3b）的高度由这些截面中最高的截面（即最高的“b”）的高度确定。最高部分的高度由该部分内的内容量决定

我已经能够使用

display:table

方法直观地实现这一点，包括卡之间水槽的单独“表格单元”元素，但不幸的是，标记混乱且不可靠，类似于这样：

标题
标题
标题
正文
正文
正文
页脚
页脚
页脚

您的目标是使

的高度相同。示例图像-[x]

如果是这样，您可能希望尝试将容器

.image

设置为

flex direction:column

，然后使用

flex basis

.image {
  display:flex;
  flex-direction:column;
  min-height: 100px;
  order: 1;
  background-color: teal;
  > div {
    background-color: coral;
    padding: 10px;
    flex-basis:100px;
  }
  &:nth-of-type(3n+3){
    margin-right: 0;
  }
}

---

对内容不太确定，但如果HTML表格不是构造此内容的语义方式，该怎么办？也许我遗漏了一些东西，但这与我的display:table cell示例不一样吗？内容在html中仍然是无序的-页眉，页眉，页眉，正文，正文，页脚，页脚，页脚，等等。。。对我来说，这似乎不适合内容结构。如果您使用html表，那么内容的语义是正确的，页眉与内容和页脚相关，显示和div是不正确的，正如您所说的，这是胡说八道的：我的想法的示例（+css对链接的技巧）可能会奏效，谢谢！我会看看是否可以在我的项目中使用一个实现：D谢谢你的回答，我实际上是在尝试让每张卡的所有可变高度内容（即图像、页眉、正文、页脚）从每张卡的相同垂直位置开始。我希望卡片是HTML中的单个元素。本文描述了一些非常接近的内容，但每张卡只有一个可变高度的内容项：