让表格列在移动视图上堆叠是我的目标

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>