我正在使用 display: table;
在容器上和display: table-cell;
在子元素上,在页面上水平突出显示一些帖子。
问题是,我不知道如何让它们响应,即随着屏幕尺寸变小,每个 child (即 table-cell
)应该按比例变小,同时继续保持水平对齐。
我该怎么做?
最佳答案
要随着页面缩小内部容器,您可以将容器 div
的宽度设置为 100%
:
在你的例子中:
#the-big-stories {
display: table;
table-layout: fixed;
/** add 100% width **/
width:100%;
}
此外,如果您想使用子容器缩放图像,只需给它们 width: 100%;
以及 height:auto;
请参阅下面 fork 的代码笔:
http://codepen.io/braican/pen/xCmsw
您可能需要使用媒体查询来真正获取内部的内容以便很好地一起播放,但容器将随浏览器缩放,内部 div
也是如此。
关于html - 在响应式设计中使用具有显示属性的 'table' 和 'table-cell'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14882803/