html - レスポンシブデザインの表示プロパティで「table」と「table-cell」を使用していますか？

Question

display: table;コンテナとdisplay: table-cell;子要素で、ページ上でいくつかの投稿を水平方向に強調表示するために使用しています。

問題は、それらをどのように応答させるかについてはわかりません。つまり、画面サイズが小さくなるにつれて、各子（つまりtable-cell）は、水平方向に整列したまま、比例して小さくなるはずです。

どうすればよいですか？

• コード例：http：//www.codepen.io/anon/pen/dCLgq
• デモ：http ：//codepen.io/anon/full/dCLgq

Answer 1

ページに合わせて内部コンテナを縮小するには、コンテナdivの幅を100%次のように設定します。

あなたの例では：

#the-big-stories {
    display: table;
    table-layout: fixed;

    /** add 100% width **/
    width:100%;
}

さらに、子コンテナを使用して画像を拡大縮小する場合はwidth: 100%;、height:auto;

以下でフォークされたcodepenを参照してください。

http://codepen.io/braican/pen/xCmsw

おそらく、メディアクエリを使用して、内部のものを実際にうまく連携させる必要がありますが、コンテナは、内部divのものと同様に、ブラウザに合わせて拡張されます。