垂直ここに短く、長いテキスト

Question

は、私が働いているかの簡略化フィドルで、2つの列を揃える：

http://jsfiddle.net/acolombo/xxab2345/

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: table;とvertical-alignhttp://jsfiddle.net/xxab2345/2/

あるいはdisplay: inline;またはdisplay: inline-block;とvertical-align http://jsfiddle.net/xxab2345/3/

Answer 2

あなたは魔法のままながら 以外に縮小する必要があります探しているのはdisplay: flexです。

両方のdivに適用すると、同じ高さになります。 更新されたフィドルはhereです。あなたはdiv要素の順序を変更したい場合、あなたはfloatが質問リビジョンに基づいてdisplay:flex :)

アップデートでは動作しませんよう、HTMLで自分の位置を交換する必要があること

は

注：

短いdivに同じ行のすべてのテキストを表示させるには、white-space: nowrap;を追加するだけです。

この新しい動作を示す更新されたフィドルはhereです。

希望すると便利です。

Answer 3

使用することができますfloat:left;

.container>div{float:left;} 

DEMO