无法垂直对齐浮动底部

Question

我有以下HTML

<div class="form-group " id="new_change_form_title">
    <label class="pull-left" for="change_title">Title</label>
    <div dir="auto" class=" pull-left explanation">A short sentence that describe what this is about</div>
    <input class="" dir="auto" id="change_title" name="change[title]" required="required" size="30" type="text" />
</div>

我希望.explanation在底部对齐，而不是在http://jsfiddle.net/xQwB5/1/中看到的顶部对齐结果

更改行高确实有帮助，但是如果解释很长，则在小屏幕上会引起问题...

有没有一种方法可以使.explanation更加接近input （更改结构以达到结果就可以了）

Answer 1

使说明的高度等于标签的高度，然后将文本放入绝对位于底部的另一个div中。 像这样： http : //jsfiddle.net/9JXjK/

.valign {
    position: absolute;
    bottom: 0;
    padding-bottom: 2px;
}

您还必须设置.explanation position:relative 。

Answer 2

为了达到您所描述的效果，此处需要进行一些更改：

1. 与其在<label>和.explanation上使用浮点数， .explanation将它们设置为display: inline; .explanation
2. 删除.explanation上的显式宽度-这导致您的文本运行到两行。
3. 现在， .explanation设置为display:inline; vertical-align属性会影响它。

查看此更新的小提琴 。

我在.explanation周围留下了红色轮廓，以便您可以看到元素边界。