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

Question

我得到了以下用例：

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

我的目标是 "synchronize" 每个框中

的高度。所以在这样的 < li > 标签中输入多少文本应该不重要，设计应该自动处理分词并将内容像一行一样对齐。

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

现在，我使用 display flex 将列表垂直对齐到元素的底部。你可以在这里找到我用过的解决方案：

但现在我遇到了问题，如果列表没有相同的内容（e.x。每个列表项超过两行，整个内容会移到顶部。

然而，是否有可能用 flexbox 模拟行行为，但实际上具有列结构？

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

希望你能理解我的问题

提前致谢！

更新：

这是 fiddle： http://jsfiddle.net/a1yr4u84/3/

大家可以看到，我在li的内容里面做了
，为了让内容合适。

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

但是，我无法控制 li 中将包含多少文本。而且我不希望用户使用
s 而是让设计处理内容，所以我希望列内的列表表现得像一行

Answer 1

将 css line-height 设置为行对象。都需要设置相同的高度。

Answer 2

...three identical boxes: first big rectangle part has variable content and thus variable height. the rest consists of a list, that is vertical aligned bottom, so that they should get the same height.

这里需要嵌套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 包装器，它将排成一行，并为列提供 33%（大约）的 flex-basis 以允许第一列中的可变内容到 space 出来。:

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

这是一个完整的例子..

Fiddle: http://jsfiddle.net/abhitalks/a1yr4u84/1/

片段:

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

<div class="wrap">
  <div class="col left">
    <img src="//lorempixel.com/128/128" />
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
    </div>
  </div>
  <div class="col middle">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one</li>
        <li>one</li>
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
  <div class="col right">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
</div>

编辑：

（基于操作员的评论）

如果您希望列表项根据相互高度与其他内容列中的对等项对齐，则不能使用 CSS 来实现。我看到您用 jQuery 标记了问题，所以我提出了一个使用 jQuery.

的快速解决方案

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

Fiddle 2: http://jsfiddle.net/abhitalks/a1yr4u84/4/

片段 2:

var $lists = $('ul.content');

for (i=0; i < 10; i++) {
    var highest = 0;
    $lists.each(function(idx, elem) {
        var h = $(elem).children().eq(i).outerHeight();
        if (h > highest) highest = h;
    });
    $lists.each(function(idx, elem) {
        $(elem).children().eq(i).outerHeight(highest);
    });    
}

* { 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: 0px 12px 0px 12px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="col left">
    <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one <br /> two</li>
        <li>one <br /> two <br /> three</li>
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
  <div class="col middle">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one</li>
        <li>one</li>
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
  <div class="col right">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one <br /> two</li>
        <li>one</li>
    </ul>
  </div>
</div>

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

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

HTML5/CSS align list-items depending on other columns mutual height

html

css

jquery

vertical-alignment

flexbox

编辑：