我想让这些表列堆叠时，在移动视图

Question

我有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;
}

<div id="container">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>

任何帮助都会很感激。我尝试使用媒体查询将内容类设置为100%的宽度。如果可能的话，我想把它们叠起来。我不确定我哪里出错了。

我尝试使用flexbox之前的表方法，但遇到了关于高度的问题，当屏幕尺寸改变，这对我来说更容易做到，我只是不知道如何使其移动响应。因为它不是一个实际的表，所以我有点困惑。

Answer 1

如果您喜欢当前的桌面设置，那么最简单的方法是将上面的所有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;
}
}

<div id="container">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>

Answer 2

我使用grid，但我认为也可以使用flex:

#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
width: 100%;
padding: 0px;
gap: 10px;
height: 50vh;
}
.content {
border: 5px solid black;
}
@media only screen and (max-width: 500px) {
#container {
grid-template-columns: 1fr;
} 
}