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

我得到以下用例：

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

我的目标是在每个框中“同步”

的高度。 因此，在这样的

标签中输入多少文本并不重要，设计应该自动处理分词并将内容对齐，就像它是一行一样。

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

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

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

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

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

希望你了解我的问题

提前致谢！

更新：

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

你可以看到，我在li的内容中做了一些内容，以使内容适合。

one 
 two
 
one 
 two 
 three
 
one

 

但是，我无法控制李的文本数量。 而且我不希望用户使用进行攻击，但让设计处理内容，所以我希望列中的列表行为像一行

Answer 1

https://stackoverflow.com/questions/32585885/html5-css-align-list-items-depending-on-other-columns-mutual-height/…三个相同的盒子：第一个大矩形部分具有可变内容，因此可变高度。 其余部分由一个列表组成，它是垂直对齐的底部，因此它们应该达到相同的高度。

你需要嵌套的flex 。 鉴于此标记：

 
 
  
 
https://stackoverflow.com/questions/32585885/html5-css-align-list-items-depending-on-other-columns-mutual-height/...
 
 
 
  
 
https://stackoverflow.com/questions/32585885/html5-css-align-list-items-depending-on-other-columns-mutual-height/...
 
https://stackoverflow.com/questions/32585885/html5-css-align-list-items-depending-on-other-columns-mutual-height/...
 
 
 
  
 
https://stackoverflow.com/questions/32585885/html5-css-align-list-items-depending-on-other-columns-mutual-height/...
 
 
  

首先展开将在一行中布置列的包装器，并给出列的33% （大约）的flex-basis ，以允许第一列中的可变内容空出：

 .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/

片段 ：

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

 
 
  
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
 
 
  
 
one
 
one
 
one
 
one
 
 
 
  
 
one
 
one
 
 
  

Answer 2

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