Question

这是我正在努力的简化方法：

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

在flexbox之上，您可以使用$(document).unbind('click').on('click', '.delete-order-btn', function() { //Code });和display: table; http://jsfiddle.net/xxab2345/2/

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

Answer 2

您正在寻找的魔力是display: flex：）

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

请注意，如果您想更改DIV的顺序，则必须在HTML中交换其位置，因为float无法使用display:flex：）

根据问题修订进行更新：

要让较短的div显示同一行的所有文字，您只需向其添加white-space: nowrap;即可。

可以找到展示此新行为的更新小提琴here。

希望这有帮助！

Answer 3

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

.container>div{float:left;}

DEMO

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

3 个答案: