Ich brauche Hilfe beim Abstand meiner Divs für 3 verschiedene Medienabfragen

Question

Hier ist der Codpen-Link mit dem Code: https://codepen.io/gregelious/pen/zYmLGex

Dies ist ein Restaurantmenü mit 3 Kategorien (Divs) als 3 separate Boxen.

(Detaillierte Anleitung hier: https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md)

Das sind die Anweisungen:

• Wenn die Breite >= 992 ist, sollte jedes Feld ein Drittel der Bildschirmbreite einnehmen
• Wenn die Breite zwischen 768 und 991 liegt, nehmen die ersten beiden Felder 50 % der Bildschirmbreite ein und das dritte Feld sollte 100 % der nächsten Zeilenbreite einnehmen
• Wenn die Breite < 768 ist, nimmt jedes Feld 100 % der Breite ein, es sollten also 3 separate Zeilen vorhanden sein< 768 时，每个框占据宽度的 100%，因此应该有 3 条单独的行

Ich habe die Div-IDs für „erster“, „zweiter“ und „dritter“ angegeben und das ist mein CSS:

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

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

Die Größe des Div ändert sich nicht, wenn ich die Größe des Browserfensters ändere, und ich weiß nicht, wie ich das Problem beheben kann. Ich habe diese Aufgabe aus einem Coursera-Kurs erhalten und mir das Video zu Medienanfragen und anderen damit zusammenhängenden Dingen noch einmal angeschaut, habe aber keine Fortschritte gemacht.

Answer 1

我建议使用容器 div 来控制 Flex 布局，如下一个演示所示：

您必须使布局正常工作，这就是您使用 flex 属性所做的事情（更新，您需要将单位设置为 min-width 和 max-width 属性，例如 px : min-width: 768px)

我还建议构建从小屏幕到大屏幕的布局（移动设备优先），并仅设置 @media (min-width) css 查询。请考虑，仅当设置了较大的媒体查询时，较大的媒体查询才会覆盖之前的较小查询。

这是一个工作演示：

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>