在响应式设计中使用带有显示属性的“表格”和“表格单元”？

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;

在下面查看您的代码笔：

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

您可能需要使用媒体查询才能真正让里面的东西很好地一起播放，但容器会随着浏览器缩放，内部的div 也是如此。