垂直对齐底部+内联块

我有以下HTML结构

box1 – > box4有一个内联块显示。

 .box { min-height: 403px; } .item { display: inline-block; vertical-align: bottom; max-width: 20%; } 

出于某种原因，我不能将div与类“item”垂直对齐到box容器的底部。 有谁知道为什么？

具有类名称项的每个元素都是旋转到下一页的轮播的一部分。 意思是每页显示3.5张图像。

Answer 1

vertical-align: bottom将内联级元素与其行框vertical-align: bottom对齐。

 .box { min-height: 403px; border: 1px solid blue; } .item { display: inline-block; vertical-align: bottom; border: 1px solid; } 

 
 
1
1
1
1
 
2
2
2
 
3
3
 
4
  

Answer 2

Oriol的解决方案是正确的。 但是，如果您想使用旧浏览器进行保存，请使用表格。

一种解决方案可能是：

 
 
 
a
 
s
 
a
 
p
 
 
 .wrapper { display: table; width: 100%; height: 403px; } .box { display: table-cell; vertical-align: bottom; } .item { display: inline-block; vertical-align: bottom; max-width: 20%; }