2016-12-10 6 views
1

Blue container, gray equal height boxes, fixed height images, and variable content white boxes that should be the same height but aren't同じ高さは灰色のボックスは等しい高さを有していて作成JS

ことなく、可変コンテンツの同じ高さの子供とflexboxes自明である:.blue-box { display: flex }

画像がデザインによって同じ高さを有しています。白いボックスにはさまざまな量のテキストが含まれているため、それぞれ異なる高さになっています。

同じ高さの白いボックスをJavaScriptなしで作成する方法はありますか?

ありがとうございます。灰色のボックスで

答えて

2

:白いボックスにdisplay: flex; flex-direction: column;

flex-grow: 1;

+2

私はあなたが利用可能なスペースを消費するために白いボックスを伸ばすことを意味すると思います。ただし、垂直方向に動作させるには、コンテナに 'flex-direction:column'を追加する必要があります。それにもかかわらず、私はそれが利用可能なスペースを埋める方法ではなく、同じ高さの列を求めているように思われる、その質問だとは思わない。 –

+0

はい、私は 'フレックス方向'を行い、それは美しく動作します。そのようなシンプルで洗練されたソリューション。 – Flix

+1

これは私の最初の答えです。あなたの質問の2番目の読書で、空きスペースを消費することとは異なる、白い箱の高さを実際に求めていたようだからです。 [それはまたCSSでは不可能です。](http://stackoverflow.com/q/36721216/3597276) –

関連する問題