Question

有很多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方法在视觉上实现这一点，包括卡片之间的排水沟的单独“table-cell”元素，但遗憾的是标记是无序的和非语义的，如下所示：

<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;
  }
}

我更喜欢使用flex的HTML，因为它的顺序正确且不包含无意义元素。

但它还远远不够：我希望能够将每张卡片包裹在自己的元素中，例如。 <article>...</article>。部分因此整张卡片可以是一个链接，但也因为我认为这将提供更清晰，更适当的分离标记。但是flex不起作用，所以这很棘手。

我已经摆弄了很多年，但是如果不使用JS或令人讨厌的HTML，我就没有办法做到这一点。我宁愿避免这两点。

关于如何实现这样的事情的任何想法？

Answer 1

您的目标是.sample-image-[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;
  }
}

纯CSS等高度分别嵌套容器

1 个答案: