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

Posted 2023-02-24

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

【英文标题】：Using 'table' and 'table-cell' with display property in responsive design?

【发布时间】：2013-01-30 17:25:03

【问题描述】：

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

问题是，我不知道如何让它们响应，即随着屏幕尺寸变小，每个孩子（即table-cell）应该按比例变小，同时继续保持水平对齐。

我该怎么做？

示例代码：http://www.codepen.io/anon/pen/dCLgq 演示：http://codepen.io/anon/full/dCLgq

【问题讨论】：

尝试在容器上添加table-layout:fixed，在孩子上添加width:auto

@JanDvorak 那没用。 :-/

如果你知道列数，设置一个准确的宽度应该可以工作：width:25% 如果是四列。

那么你可能也不需要display:table

@JanDvorak 我在子元素上尝试了width: 31%; 和float: left;，这似乎成功了。那是你建议我做的吗？ （对于其他人，请将其添加为答案。我现在使用 braican 的解决方案。）谢谢！

【参考方案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 也是如此。

【讨论】：

table-layout: fixed; 和 display: table; 在这里解决了我的问题。谢谢。 :)