CSS响应度，高度不相等的inline-divs

Question

如果我们将多个div的样式设置为“ inline-block”，并且其中一个的高度大于其他的高度，则所有较小的div都会在底部对齐，从而在顶部创建额外的空间。但是我只想让较小的div在顶部对齐，并在底部保留任何多余的空间。有什么方法可以达到要求的效果？

Answer 1

内联块vertical-align: top的

div可以做到。 vertical-align

.b{
  display: block;
  background-color: red;
}

.ib {
  display: inline-block;
  background-color: blue;
  width: 50px;
  vertical-align: top; /*this line*/
}

.d1 {
  height: 100px;
}

.d2, .d3 {
  height: 50px;
}

<div class="b">
  <div class="ib d1"></div>
  <div class="ib d2"></div>
  <div class="ib d3"></div>
</div>