HTML5 / CSS对齐列表项，取决于其他列的相互高度

问题描述

我有以下用例：

您可以看到三个相同的框：
每个框开始于一个大矩形框，具有图片和变量内容，因此具有可变的高度。
其余的包括一个列表，这是垂直对齐的底部，所以他们应该得到相同的高度。

我的目标是同步高度的， li>在每个框中。所以你不应该重要你输入多少文本， li>标签，设计应该自动处理单词拆分并将内容对齐为一行。

换句话说，像Abhitalks所说，

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

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

但是，是不是有可能用flexbox模拟一个行行为，但实际上有一个列结构？

希望你能理解我的问题

提前感谢！

更新：

这里是小提琴：

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

 < li> one< br />两个< / li> 
< li> one< br /两个< br />三个< / li> 
< li>一个< br />< br />< / li> 
  

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

解决方案

这里需要嵌套 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％（大约）到列以允许变量内容在第一列空出。：

  .wrap {display：flex; } 
 .wrap .col {flex：1 0 33％; } 
  

接下来， flex 列中的图像和内容列表。此时 flex-basis 不是必需的：

  .wrap .col {flex：1 0 33％;显示：flex; flex-direction：column; } 
 .col img，.col .content {flex：0 0 auto; } 
  

为了保持列表与底部垂直对齐，只需提供 margin-top：auto 到列表内容：

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

这是一个完整的例子..

小提琴：

snippetdata-lang =jsdata-hide =true>

  var $ lists = $（'ul.content'）; for（i = 0; i  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 gray; display：flex;}。wrap .col {flex：1 0 33％;显示：flex; flex-direction：column;}。col img，.col .content {flex：0 0 auto; } .col img {width：128px;显示：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 />两个< / li> < li> one< br />两个< br />三个< / li> < li>一个< / li> < li>一个< / li> < / ul> < / div> < div class =col middle> < img src =// lorempixel.com/128/128/> < ul class =content> < li>一个< / li> < li>一个< / li> < li>一个< / li> < li>一个< / li> < / ul> < / div> < div class =col right> < img src =// lorempixel.com/128/128/> < ul class =content> < li> one< br />两个< / li> < li>一个< / li> < / ul> < / div>< / div>