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 - ＆gt; box4有一个内联块显示。

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

出于某种原因，我不能将div与class＆＃34; item＆＃34;垂直对齐。到盒子容器的底部。有谁知道为什么？

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

Answer 1

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

垂直对齐底部+内联块

2 个答案: