垂直对齐两列，较短和较长的文本

Question

这是我正在处理的内容的简化 fiddle：

HTML:

<div id="container">
    <div id="DivB">Just another text.</div>
    <div id="DivA">Lots and lots of text. Lots and lots of text.Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text. Lots and lots of text.</div>
</div>

CSS:

#container {
    overflow: hidden;
}
#DivA {
    overflow: hidden;
    background: #ccc;
}
#DivB {
    float: right;
    background: #000;
    color: #FFF;
}

我尝试了很多方法来垂直对齐较短的文本和较长的文本，以保持一切响应，但我似乎找不到有效的解决方案。

我发现的所有类似问题都使用非动态的东西，比如固定宽度、高度、边距或其他任何东西，这些解决方案对我的问题不起作用。谢谢！

编辑：抱歉，我忘了写，较短的行仍然需要像我发布的示例中那样保持其大小，除此之外，较长的文本需要缩小当它保持静止时

Answer 1

你要找的魔法是display: flex :)

将它应用于两个 div，它们将具有相同的高度。可以找到更新的 fiddle here。

请注意，如果您想更改 DIV 的顺序，则必须交换它们在 HTML 中的位置，因为 float 不能与 display:flex 一起使用： )

根据问题修订更新：

要让较短的 div 在同一行显示所有文本，您需要做的就是向其添加 white-space: nowrap;。

可在 here.

中找到展示此新行为的更新 fiddle

希望对您有所帮助！

Answer 2

在 flexbox 之上，您可以使用 display: table; 和 vertical-align http://jsfiddle.net/xxab2345/2/

甚至 display: inline; 或 display: inline-block; 和 vertical-align http://jsfiddle.net/xxab2345/3/

Answer 3

更简单的方法是使用 float:left;

.container>div{float:left;}

DEMO

垂直对齐两列，较短和较长的文本

Vertical align two columns, a shorter and a longer text

css

vertical-alignment