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

这里有一些事情需要改变才能实现你描述的效果：

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

Check out this updated fiddle

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

浮动时无法垂直对齐底部

2 个答案: