我有 5 列，我将它们作为表格，因为这是我编码的最简单方法。
我想让它们堆叠在移动视图上。我该如何去做呢？
我的格式是：
#container { display: table; width: 100%; table-layout: fixed; padding: 10px; } .content { display: table-cell; text-align: center; border: 5px solid black; word-wrap: break-word; } .content img { width: 100%; height: 100%; display: table-header-group; }
如有任何帮助，我们将不胜感激。我尝试使用媒体查询将内容类设置为 100% 的宽度。如果可能的话，我希望它们能够堆叠起来。我不确定我哪里出错了。
我尝试在表格方法之前使用flexbox，但是当屏幕尺寸改变时遇到了有关高度的问题，这对我来说更容易做到，我只是不知道如何使其具有移动响应能力。因为它不是一个实际的表格，所以我有点困惑。
如果您喜欢当前的桌面设置，最简单的方法是将上面的所有 CSS 包装在
@media查询中以适应更大的屏幕。就像@media (min-width: 768px) { ... all your CSS }- 这样，移动设备上的任何内容都不会受到这些样式的影响。默认情况下，div是块级元素，并且将是 100% 并堆栈。/* COMMON STYLES THAT WILL AFFECT ALL SCREENS - just for presentation and can be removed */ .content { border: 5px solid black; background: blue; height: 20px; margin-bottom: 10px; } /* now this will only apply to larger screens */ @media (min-width: 768px) { #container { display: table; width: 100%; table-layout: fixed; padding: 10px; } .content { display: table-cell; text-align: center; word-wrap: break-word; /* REMOVE THIS from your real code, just a reset from the global above */ margin-bottom: 0; background: transparent; height: auto; } .content img { width: 100%; height: 100%; display: table-header-group; } }