Saya memerlukan bantuan menjarakkan div saya untuk 3 pertanyaan media yang berbeza

Question

Berikut ialah pautan codpen dengan kod: https://codepen.io/gregelious/pen/zYmLGex

Ini adalah menu restoran dengan 3 kategori (div) sebagai 3 kotak berasingan.

(Arahan terperinci di sini: https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md)

Ini arahannya:

• Apabila lebar >= 992, setiap kotak harus memenuhi satu pertiga daripada lebar skrin
• Apabila lebar antara 768 dan 991, dua kotak pertama menduduki 50% daripada lebar skrin dan kotak ketiga sepatutnya menduduki 100% daripada lebar baris seterusnya
• Apabila lebar < 768, setiap kotak mengambil 100% lebar, jadi perlu ada 3 baris berasingan< 768 时，每个框占据宽度的 100%，因此应该有 3 条单独的行

Saya memberikan id div untuk "pertama", "kedua" dan "ketiga" dan ini css saya:

@media (min-width: 992) {
  div {
    width: 33.33%;
  }
}

@media (min-width: 768) and (max-width: 991) {
  #first, #second {
    width: 50%;
  }
  #third {
    width: 100%;
  }
}

Saiz div tidak berubah apabila saya mengubah saiz tetingkap penyemak imbas dan saya tidak tahu bagaimana untuk membetulkannya. Saya menerima tugasan ini daripada kursus Coursera dan menonton semula video mengenai pertanyaan media dan perkara lain yang berkaitan tetapi tiada kemajuan.

Answer 1

Saya mengesyorkan menggunakan div kontena untuk mengawal reka letak Flex, seperti yang ditunjukkan dalam demo seterusnya:

Anda perlu membuat susun atur berfungsi, itu yang anda gunakan flex 属性所做的事情（更新，您需要将单位设置为 min-width 和 max-width 属性，例如 px : min-width: 768px)

Saya juga mengesyorkan membina reka letak yang berskala daripada skrin kecil kepada besar (mudah alih dahulu) dan menyediakan hanya @media (min-width) pertanyaan css. Pertimbangkan bahawa hanya jika pertanyaan media yang lebih besar ditetapkan, pertanyaan media yang lebih besar akan menimpa pertanyaan yang lebih kecil sebelumnya.

Berikut ialah demo yang berfungsi:

body {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

div {
  float: left;
}

section {
  background-color: gray;
  border: 1px solid black;
  margin: 10px;
}

section h2 {
  background-color: blue;
  border: 1px solid black;
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 2px;
  padding-right: 30px;
  padding-left: 30px;
  display: inline;

  float: right;
}

section p {
  clear: right;
  padding: 0px 10px 10px 10px;
}

/** added code */
.container {
  display: flex;
  flex-wrap: wrap;
}

.menu {
  width: 100%;
}

@media (min-width: 768px) {
  .menu {
    width: 50%;
  }
  
  .flow {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .menu, .flow {
    width: 33.333%;
  }
}

<h1>Our Menu</h1>

<div class="container">
  <div id="first" class="menu">
    <section>
      <h2>Chicken</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </div>

  <div id="second" class="menu">
    <section>
      <h2>Beef</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </div>

  <div id="third" class="menu flow">
    <section>
      <h2>Sushi</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
  </div>
</div>