有很多 CSS 的“等高列”、“圣杯”布局、巧妙的实现，display: table-cell当然还有一些很好的display: flex想法，尤其是在 SO 上。
但是我正在尝试实现我在其他任何地方都找不到的东西，而且如果不求助于 JS，我就无法实现，我宁愿避免。
我正在尝试创建一组等高的父容器，每个容器都有一组在卡片之间共享高度的子元素。每张卡片通过排水沟与其他相邻卡片隔开。显然我不能发布图片，因为我是新手，但视觉上更容易解释。所以这里有一个免费图片托管网站的链接：http: //postimg.org/image/ltcd8ns1l/
在图像中，您会看到三张卡片（1、2、3），每张卡片都有三个部分（1a、1b、1c、2a、2b、2c、3a、3b、3c）。卡片中的每个部分与其他卡片中的等效部分高度相同（即 1b = 2b = 3b、1c = 2c = 3c 等）。每个等效部分（例如 1b、2b 和 3b）的高度由这些部分中最高的部分（即最高的“b”）的高度决定。最高部分的高度由该部分内的内容量决定。
我已经能够使用一种display: table方法在视觉上实现这一点，包括用于卡片之间的排水沟的单独“表格单元”元素，但不幸的是，标记是无序且无语义的，如下所示：
<div class="table-row">
<div class="heading">heading</div>
<div class="gutter"></div>
<div class="heading">heading</div>
<div class="gutter"></div>
<div class="heading">heading</div>
<div class="gutter"></div>
</div>
<div class="table-row">
<div class="body">body text here</div>
<div class="gutter"></div>
<div class="body">body text here</div>
<div class="gutter"></div>
<div class="body">body text here</div>
<div class="gutter"></div>
</div>
<div class="table-row">
<div class="foot">footer</div>
<div class="gutter"></div>
<div class="foot">footer</div>
<div class="gutter"></div>
<div class="foot">footer</div>
<div class="gutter"></div>
</div>...可怕。
所以我也能够得到一些与display: flex. 这是 CodePen 中的快速演示：http: //codepen.io/anon/pen/xbXWpQ
为了后代，这里是 HTML：
<div class="flex-wrap">
<div class="flex-container">
<a href="#">
<div class="image">
<div class="sample-image-one"></div>
</div>
<div class="heading">heading: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
</div>
<div class="body">body text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.</div>
<div class="foot">footer: Sed ut perspiciatis unde omnis.</div>
</a>
<a href="#">
<div class="image">
<div class="sample-image-two"></div>
</div>
<div class="heading">heading: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</div>
<div class="body">body text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</div>
<div class="foot">footer: Sed ut perspiciatis unde omnis iste natus error sit.</div>
</a>
<a href="#">
<div class="image">
<div class="sample-image-three"></div>
</div>
<div class="heading">heading: Sed ut perspiciatis unde omnis iste natus error</div>
<div class="body">body text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</div>
<div class="foot">footer: Sed ut perspiciatis.</div>
</a>
</div>
</div>和 SCSS：
// wrap & global styles
body, html {
margin: 0;
width: 100%;
}
.flex-wrap {
padding: 3%;
font-family: sans-serif;
}
.flex-container {
display: flex;
flex-wrap: wrap;
> div {
margin-right: 3%;
width: 25%; // should be 29.33333% but this doesn't seem to work in codepen
color: white;
padding: 15px;
}
}
// image sections
.image {
min-height: 100px;
order: 1;
background-color: teal;
> div {
background-color: coral;
padding: 10px;
}
&:nth-of-type(3n+3){
margin-right: 0;
}
}
// sample images of different heights
.sample-image-one { height: 120px; }
.sample-image-two { height: 160px; }
.sample-image-three { height: 80px; }
// copy sections
.heading {
order: 2;
background-color: tomato;
&:nth-of-type(3n+4){
margin-right: 0;
}
}
.body {
order: 3;
background-color: deepskyblue;
&:nth-of-type(3n+5){
margin-right: 0;
}
}
.foot {
order: 4;
background-color: gold;
&:nth-of-type(3n+3){
margin-right: 0;
}
}
我更喜欢 HTML using flex，因为它的顺序正确并且不包含无意义的元素。
但这还远远不够：我希望能够将每张卡片包装在自己的元素中，例如。<article>...</article>. 部分原因是整张卡片可以是一个链接，但也因为在我看来这将提供更清晰、更适当的分隔标记。但flex不是那样工作的，所以很棘手。
我已经摆弄了很长时间，但我没有看到不使用 JS 或讨厌的 HTML 的方法。我宁愿避免这两种情况。
关于如何实现这一目标的任何想法？