如何在较大元素旁边对齐较小的内联块元素？

Question

如何在顶部对齐内联块元素？我的意思是如何使内嵌块元素从最大元素的顶部而不是从底部看起来是对齐的。我做了一个小提琴来说明它： https://jsfiddle.net/shzyku6u/

当您将窗口展开得足够宽时，3个较小的蓝色图像会从较大的蓝色图像的底部内嵌显示。我希望它们从大的蓝色图像的顶部出现 - 如果可能的话。

这是来自小提琴的HTML / CSS：

.topwrapper {
  max-width: 1000px;
  text-align: center;
}
.block {
  display: inline-block;
  width: 400px;
}
.listitem {
  display: inline-block;
  width: 100px;
}

<div class="topwrapper">

  <div class="block">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/480px-000080_Navy_Blue_Square.svg.png" width="400" height="400" class="bigimage">
  </div>

  <div class="block">
    <ul class="list">
      <li class="listitem">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/200px-000080_Navy_Blue_Square.svg.png" height="100" width="100">
      </li>
      <li class="listitem">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/200px-000080_Navy_Blue_Square.svg.png" height="100" width="100">
      </li>
      <li class="listitem">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/200px-000080_Navy_Blue_Square.svg.png" height="100" width="100">
      </li>
    </ul>
  </div>

</div>

Answer 1

由于.block个兄弟元素都有display inline-block，因此vertical-align属性将得到尊重。只需添加vertical-align: top：

即可

Updated Example

.block {
  display: inline-block;
  vertical-align: top;
  width: 400px;
}