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

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的 's.