无法垂直对齐到浮动底部答案

【问题标题】：Cannot vertical align to the bottom on float无法垂直对齐到浮动底部
【发布时间】：2013-12-06 23:06:34
【问题描述】：

我有以下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/中所见@

更改 line-height 确实有帮助，但如果解释很长，在小屏幕上会导致问题...

有没有办法让 .explanation 更接近input（更改结构以达到结果是可以的）

【问题讨论】：

是不是和这个类似：stackoverflow.com/questions/585945/…
不完全因为在那个问题上浮动没有使用

标签： html css vertical-alignment

【解决方案1】：

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

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

您还必须进行.explanation position:relative。

【讨论】：

【解决方案2】：

为了达到你描述的效果，这里有几件事需要改变：

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

Check out this updated fiddle.

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

【讨论】：