如何将标签对齐到顶部？

Question

jsfiddle

如果不修改html，我怎样才能将它的标签与图片中的顶部对齐：

<div class="col">
<label for="foo">Select:</label>
<select id="foo" name="select">
   <option value="1">1</option>
   <option value="2">2</option>
</select>
</div>
<div class="col">
<label for="bar">Select any of the following:</label>
<select id="bar" name="select">
   <option value="11">11</option>
   <option value="22">22</option>
</select>
</div>

我可以将标签对齐到顶部并选择底部如果它是使用vertical-align在两个div块中，但我想知道如何不修改html代码如何将标签对齐到顶部并选择到底部？

Answer 1

使用Display：Table-cell使两列具有相同的高度：

div.col {
  display: table-cell;
    border: 1px solid blue;
    font-size: 300%;
    width: 300px;
    position: relative;
    padding-bottom: 40px; /* Space for the 'select'*/
}

select {
    position: absolute;
    bottom: 0;
    left: 0;
}

演示:(在Chrome中测试）http://jsfiddle.net/cM6Yp/