垂直对齐底部+内联块

Question

我有以下HTML结构

<div class = "box">
  <div class="box1 item"></div>
  <div class="box2 item"></div>
  <div class="box3 item"></div>
  <div class="box4 item"></div>
</div>

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

 <div class="box"> <div class="box1 item">1<br />1<br />1<br />1</div> <div class="box2 item">2<br />2<br />2</div> <div class="box3 item">3<br />3</div> <div class="box4 item">4</div> </div> 

如果要将它们对齐到容器的底部，则需要更高级的布局，如CSS表或flexbox：

 .box { display: flex; align-items: flex-end; min-height: 403px; border: 1px solid blue; } .item { border: 1px solid; } 

 <div class="box"> <div class="box1 item">1<br />1<br />1<br />1</div> <div class="box2 item">2<br />2<br />2</div> <div class="box3 item">3<br />3</div> <div class="box4 item">4</div> </div> 

Answer 2

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

一种解决方案可能是：

<div class="wrapper">
  <div class = "box">
    <div class="box1 item">a</div>
    <div class="box2 item">s</div>
    <div class="box3 item">a</div>
    <div class="box4 item">p</div>
  </div>
</div>  

.wrapper {
  display: table;
  width: 100%;
  height: 403px;
}

.box {
  display: table-cell;
  vertical-align: bottom;
}

.item { 
   display: inline-block;
   vertical-align: bottom;
   max-width: 20%;
}