2011-12-16 4 views
0

以下のjsfiddleの例では、左側の列(#left)と右側の列(#right)を中央の列(#middle)の中央に垂直に揃えたいと思います。中央の列(#ミドル)の高さはさまざまです。CSSを使用するだけで、左右の列をさまざまな高さの動的な列に垂直に整列できますか?

これはひいては

text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden; 

の使用は、この部分は、画面サイズ変更に必要に応じて動作するよう、モバイルデバイスするためのものです。

これはCSSのみ(javascriptなし)を使用して達成できますか?

参照:テーブルレイアウトを持つテーブル(-cell):固定これを行うにはhttp://jsfiddle.net/TGsdg/4/

+0

ここでは 'ディスプレイを使用して、私が働いていたソリューションです:あなたの右の&左columsが固定幅を持つことができる場合にのみ、しかし、動作しますHTTP ://jsfiddle.net/jblasco/4T8WU/1/残念ながら 'overflow:hidden'は効果がないようです。多分、フィドルは誰かにアイデアを与えるでしょう。 – justis

+0

固定された高さを使用することによってのみ、動作するようになりました。しかし、それは容認できないでしょうか? http://jsfiddle.net/jblasco/4T8WU/2/ – justis

答えて

1

唯一の方法は、ディスプレイを使用することです。垂直コンテンツを揃えるために、テーブルcell`:

http://jsfiddle.net/TGsdg/7/

+0

完璧に動作します。ありがとうございました! – haydenp

関連する問題