在div中将顶部的元素水平对齐

Question

I would like to align these elements horizontally:

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

However the output that I see with the previous code is that:

               divS
               divS
div1 div2 div3 divS

I want to find a way to align the first three divs with the top part of the select and not with the bottom part.

div1 div2 div3 divS
               divS
               divS

Is it possible?

Answer 1

Add vertical-align:top to .block class. Please let me know if you wanted this.

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