Mon objectif est d'empiler les colonnes du tableau sur la vue mobile.

Question

J'ai 5 colonnes et j'en fais un tableau car c'est le moyen le plus simple pour moi de coder.

Je veux qu'ils s'empilent sur la vue mobile. Comment puis-je faire cela?

Mon format est :

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

Toute aide serait grandement appréciée. J'ai essayé d'utiliser une requête multimédia pour définir la classe de contenu sur une largeur de 100 %. J'aimerais qu'ils soient empilables si possible. Je ne sais pas où je me suis trompé.

J'ai essayé d'utiliser flexbox avant la méthode table, mais j'ai rencontré des problèmes de hauteur lorsque la taille de l'écran change. C'est plus facile pour moi, je ne sais tout simplement pas comment le rendre réactif aux mobiles. Comme ce n'est pas une vraie table, je suis un peu confus.

Answer 1

Si vous aimez la configuration actuelle du bureau, le moyen le plus simple est d'envelopper tous les CSS ci-dessus dans @media 查询中以适应更大的屏幕。就像 @media (min-width: 768px) { ... all your CSS } - 这样，移动设备上的任何内容都不会受到这些样式的影响。默认情况下，div qui est un élément de niveau bloc et sera empilé à 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>