J'ai besoin d'aide pour espacer mes divs pour 3 requêtes multimédias différentes

Question

Voici le lien codpen avec le code : https://codepen.io/gregelious/pen/zYmLGex

Il s'agit d'un menu de restaurant avec 3 catégories (divs) réparties en 3 cases distinctes.

(Instructions détaillées ici : https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md)

Voici les instructions :

• Lorsque la largeur >= 992, chaque case doit occuper un tiers de la largeur de l'écran
• Lorsque la largeur est comprise entre 768 et 991, les deux premières cases occupent 50% de la largeur de l'écran et la troisième case doit occuper 100% de la largeur de ligne suivante
• Lorsque la largeur < 768, chaque case occupe 100 % de la largeur, il doit donc y avoir 3 lignes distinctes< 768 时，每个框占据宽度的 100%，因此应该有 3 条单独的行

J'ai donné les identifiants div pour "premier", "deuxième" et "troisième" et voici mon CSS :

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

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

La taille du div ne change pas lorsque je redimensionne la fenêtre du navigateur et je ne sais pas comment y remédier. J'ai reçu cette mission d'un cours Coursera et j'ai revu la vidéo sur les requêtes multimédias et d'autres éléments connexes, mais je n'ai fait aucun progrès.

Answer 1

Je recommande d'utiliser un conteneur div pour contrôler la disposition Flex, comme indiqué dans la démo suivante :

Vous devez faire fonctionner la mise en page, c'est ce que vous utilisez flex 属性所做的事情（更新，您需要将单位设置为 min-width 和 max-width 属性，例如 px : min-width: 768px)

Je recommande également de créer des mises en page qui s'adaptent aux petits et grands écrans (mobile d'abord) et de configurer uniquement @media (min-width) requêtes CSS. Considérez que ce n’est que si une requête multimédia plus grande est définie que la requête multimédia plus grande écrasera la requête plus petite précédente.

Voici une démo fonctionnelle :

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>