在div中將頂部的元素水平對齊

Question

我想將這些元素水平對齊：

<div class="row">
  <div class="block">xxxxx</div>
  <div class="block">xxxx</div>
  <div class="block">xxx</div>
  <div class="block"><select multiple></select>
</div>

.row {
  width: 100%;
  /*margin: 0 auto;*/
    text-align: center;
}
.block {
  width: 100px;
  /*float: left;*/
    display: inline-block;
    zoom: 1;
}

但是我在前面的代碼中看到的輸出是：

               divS
               divS
div1 div2 div3 divS

我想找到一種方法，使前三個div與select的頂部對齊而不是與底部對齊。

div1 div2 div3 divS
               divS
               divS

可能嗎？

Answer 1

將vertical-align:top添加到.block類。 如果您要這個，請告訴我。

.block {
  width: 100px;
  /*float: left;*/
    display: inline-block;
    zoom: 1;
    vertical-align:top;
}
.row {
  width: 100%;
  /*margin: 0 auto;*/
    text-align: center;
}