我需要帮助为 3 个不同的媒体查询间隔我的 div-PHP中文网问答

这是带有代码的 codpen 链接： https://codepen.io/gregelious/pen/zYmLGex

这是一个餐厅菜单，有 3 个类别（div）作为 3 个独立的框。

（此处的详细说明：https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md）

这些是说明：

当宽度 >= 992 时，每个框应占据屏幕宽度的三分之一
当宽度在 768 和 991 之间时，前两个框占据屏幕宽度的 50%，第三个框应占据下一行宽度的 100%
当宽度 < 768 时，每个框占据宽度的 100%，因此应该有 3 条单独的行

我给出了“第一”、“第二”和“第三”的 div id，这是我的 css：

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

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

当我调整浏览器窗口大小时，div 的大小没有改变，我不知道如何修复它。我从 Coursera 课程中收到了这项作业，并重新观看了有关媒体查询和其他相关内容的视频，但没有取得任何进展。

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>