在响应式设计中使用'table'和'table-cell'以及display属性？

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也是如此。