讓表格列在移動視圖上堆疊是我的目標

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>