Mendapatkan lajur jadual untuk disusun pada paparan mudah alih ialah matlamat saya

Question

Saya mempunyai 5 lajur dan saya menjadikannya jadual kerana itulah cara paling mudah untuk saya kod.

Saya mahu mereka bertindan pada paparan mudah alih. Bagaimana saya melakukan ini?

Format saya ialah:

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

Sebarang bantuan amat kami hargai. Saya cuba menggunakan pertanyaan media untuk menetapkan kelas kandungan kepada lebar 100%. Saya mahu mereka boleh disusun jika boleh. Saya tidak pasti di mana silap saya.

Saya cuba menggunakan flexbox sebelum kaedah jadual tetapi menghadapi masalah dengan ketinggian apabila saiz skrin berubah, ini lebih mudah untuk saya lakukan, cuma saya tidak tahu bagaimana untuk menjadikannya responsif mudah alih. Memandangkan ia bukan meja sebenar, saya agak keliru.

Answer 1

Jika anda sukakan persediaan desktop semasa, cara paling mudah ialah membungkus semua CSS di atas dalam @media 查询中以适应更大的屏幕。就像 @media (min-width: 768px) { ... all your CSS } - 这样，移动设备上的任何内容都不会受到这些样式的影响。默认情况下，div yang merupakan elemen tahap blok dan akan disusun 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>