html - 在响应式设计中使用具有显示属性的 'table' 和 'table-cell'？

Question

我正在使用 display: table;在容器上和display: table-cell;在子元素上，在页面上水平突出显示一些帖子。

问题是，我不知道如何让它们响应，即随着屏幕尺寸变小，每个 child (即 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;

请参阅下面 fork 的代码笔:

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

您可能需要使用媒体查询来真正获取内部的内容以便很好地一起播放，但容器将随浏览器缩放，内部 div 也是如此。