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