HTML5/CSS 根据其他列的相互高度对齐列表项

Question

我得到了以下用例：

您可以看到三个相同的框：每个框都以一个大矩形框开始，该框有图片和可变内容，因此具有可变高度。其余部分由一个列表组成，底部垂直对齐，因此它们应该具有相同的高度。

我的目标是“同步”每个盒子中 < li > 的高度。因此，在这样的 <li> 标签中输入多少文本并不重要，设计应该自动处理分词并像一行一样对齐内容。

换句话说，就像 Abhitalks 所说的那样，我想根据相互的高度将列表项与其他内容列中的同行对齐。

现在，我使用 display flex 将列表垂直对齐到元素的底部。您可以在此处找到我使用的解决方案： 浮动 div 的垂直对齐

但是现在我遇到了问题，如果列表没有相同的内容（例如每个列表项多于两行，整个事情会转移到顶部。

但是，是否有可能以某种方式使用 flexbox 模拟行行为，但实际上具有列结构？

我需要一个列结构，这样我就可以轻松获得响应式布局。

希望你明白我的问题

提前致谢！

更新：

这是小提琴：http : //jsfiddle.net/a1yr4u84/3/

您可以看到，我在 li 的内容中制作了 <br/>，以使内容适合。

<li>one <br /> two</li>
<li>one <br /> two <br /> three</li>
<li>one<br /><br /></li>

但是，我无法控制 li 中有多少文本。而且我不希望用户使用 <br/> 进行 hack，而是让设计处理内容，所以我希望列内的列表表现得像一行

Answer 1

...三个相同的盒子：第一个大矩形部分内容可变，因此高度可变。其余部分由一个列表组成，底部垂直对齐，因此它们应该具有相同的高度。

你需要flex在这里嵌套。鉴于此标记：

<div class="wrap">
  <div class="col left">
    <img src="..." />
    <div class="content">
        <p>...</p>
    </div>
  </div>
  <div class="col middle">
      <img src="" />
    <ul class="content">
        <li>...</li>
        <li>...</li>
    </ul>
  </div>
  <div class="col right">
      <img src="..." />
    <ul class="content">
        <li>...</li>
    </ul>
  </div>
</div>

第一flex，这将布局在一行中的列，并给出一个包装flex-basis的33%（约），以列，以允许在第一列到空间out变量内容：

.wrap { display: flex; }
.wrap .col { flex: 1 0 33%; }

接下来，flex在列中布局图像和内容列表的列。这个时间flex-basis不需要：

.wrap .col { flex: 1 0 33%; display: flex; flex-direction: column; }
.col img, .col .content { flex: 0 0 auto; }

为了使列表垂直对齐到底部，只需为margin-top:auto列表内容提供一个：

.col .content { margin-top: auto; }

这是一个完整的例子..

小提琴：http : //jsfiddle.net/abhitalks/a1yr4u84/1/

片段：

<div class="wrap">
  <div class="col left">
    <img src="..." />
    <div class="content">
        <p>...</p>
    </div>
  </div>
  <div class="col middle">
      <img src="" />
    <ul class="content">
        <li>...</li>
        <li>...</li>
    </ul>
  </div>
  <div class="col right">
      <img src="..." />
    <ul class="content">
        <li>...</li>
    </ul>
  </div>
</div>

.wrap { display: flex; }
.wrap .col { flex: 1 0 33%; }

编辑：

（基于 op 的评论）

如果您希望列表项根据相互高度与其他内容列中的对等项对齐，那么您不能使用 CSS 做到这一点。我看到你用 标记了这个问题jQuery，所以我提出了一个使用 jQuery 的快速和肮脏的解决方案。

计算height列表项的 ，并将该高度应用于其他列中的所有相应项：

小提琴 2：http : //jsfiddle.net/abhitalks/a1yr4u84/4/

片段 2：

.wrap .col { flex: 1 0 33%; display: flex; flex-direction: column; }
.col img, .col .content { flex: 0 0 auto; }

.col .content { margin-top: auto; }

* { box-sizing: border-box; }
.wrap {
  width: 80%; margin: 16px auto; padding: 12px; border: 1px solid grey;
  display: flex;
}
.wrap .col {
    flex: 1 0 33%; display: flex; flex-direction: column;
}
.col img, .col .content { flex: 0 0 auto; }
.col img { width: 128px; display: block; margin: 2px auto; }
.col .content { margin: auto 12px 0px 12px; }

注意：我使用了任意数量的10来循环遍历列表项。在生产代码中，您必须计算最大列表中的列表项数。