Mein Ziel ist es, Tabellenspalten in der mobilen Ansicht zu stapeln

Question

Ich habe 5 Spalten und mache daraus eine Tabelle, weil das für mich die einfachste Art zu programmieren ist.

Ich möchte, dass sie in der mobilen Ansicht gestapelt werden. Wie mache ich das?

Mein Format ist:

#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>

Jede Hilfe wäre sehr dankbar. Ich habe versucht, die Inhaltsklasse mithilfe einer Medienabfrage auf 100 % Breite festzulegen. Ich möchte, dass sie möglichst stapelbar sind. Ich bin mir nicht sicher, wo ich einen Fehler gemacht habe.

Ich habe versucht, Flexbox vor der Tabellenmethode zu verwenden, hatte aber Probleme mit der Höhe, wenn sich die Bildschirmgröße ändert. Das ist für mich einfacher, ich weiß nur nicht, wie ich es auf Mobilgeräte reagieren lassen kann. Da es sich nicht um einen echten Tisch handelt, bin ich etwas verwirrt.

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>