垂直对齐底部+内嵌块 [英] vertical align bottom + inline block

问题描述

我有以下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显示inline-block。

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

由于某些原因，我不能将divs与类item垂直对齐盒子底部的容器。有人知道为什么？

每个具有类名项目的元素都是转到下一页的转盘的一部分。

解决方案

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>  

b

I have the following HTML structure

<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 has a display of inline-block.

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

For some reason, I cannot vertically align the divs with class "item" to the bottom of the box container. Does anyone know why?

Each element with class name item is part of a carousel that bleeds to the next page. Meaning each page shows 3.5 images.

解决方案

vertical-align: bottom aligns inline-level elements to the bottom of their line box.

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

If you want to align them to the bottom of the container, you need more advanced layouts, like CSS tables, or 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>

这篇关于垂直对齐底部+内嵌块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！