在響應式設計中將'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也是如此。