幅が狭くなると、中央のレイアウトになる2つの列のレイアウト

Question

私の目標は、ページの中央に2つの列＃1を並べて配置することです。ウィンドウの幅が縮小され、両方の列が幅広くフィットしなくなったときは、ページの中央に2つ、上下に2つずつ配置する必要があります。

私は両方の列を最大幅のラッパーに入れ、左右に浮かべて＃1を達成しました。ただし、ラッパーの幅が小さくなると、列はページの中央ではなく左右に揃えられます。

各列をinline-blockとして表示してセンタリングすることで、＃2を達成できます。しかし、ラッパーが全幅にあるとき、短い列は、画面の下にあることが多い底部に垂直に配置されます。

アイデア？

Answer 1

各列をインラインブロックとして表示し、 を中心に表示することで、＃2を達成できます。しかし、ラッパーが全幅である場合、短い方の 列は、画面下部の垂直方向に一列に並んでいます。これは多くの場合、 の画面の下にあります。

display: inline-blockがあるものにはvertical-align: topも追加しても問題ありません。

あなたはそれを説明するように、問題：http://jsfiddle.net/thirtydot/Xyrta/

修正vertical-align: top付：整列される要素に設定する必要がありましたtop`：http://jsfiddle.net/thirtydot/Xyrta/1/