在响应式设计中使用'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.