【发布时间】：2022-07-03 15:58:40
【问题描述】：
我是编码新手，并试图弄清楚如何一起使用 HTML、CSS 和媒体查询，以在桌面视图中并排创建相等容器的 3 项菜单。
在平板电脑视图中，菜单项移动到 2 个菜单项并停留在第一行，第三个菜单项移动到第二行，但跨越了第一行 2 个菜单项的长度。
在移动视图中，所有 3 个菜单项都堆叠在一起。请参阅下面的图片。我的桌面断点是 992 像素或更大，平板电脑视图是 768 像素和 991 像素，移动设备是 990 像素或更少。
我编写了以下 HTML 和 CSS 以尝试复制图像显示的内容。我的菜单项不响应我放入我的 css 文件的媒体查询。我只能为项目使用基本的响应式框架。
任何帮助或指导将不胜感激。
* {
box-sizing: border-box;
}
h1 {
font-family: calibri, sans-serif;
width: 100%;
margin: 10px;
text-align: center;
}
div.container1 {
background-color: #A0A0A0;
font-family: calibri, sans-serif;
width: 400px;
border: 1px solid black;
float: left;
margin: 10px;
overflow: hidden;
}
div.container2 {
background-color: #A0A0A0;
font-family: calibri, sans-serif;
width: 400px;
border: 1px solid black;
float: left;
margin: 10px;
overflow: hidden;
}
div.container3 {
background-color: #A0A0A0;
font-family: calibri, sans-serif;
width: 400px;
border: 1px solid black;
float: left;
margin: 10px;
overflow: hidden;
}
div#menu1 {
font-family: calibri, sans-serif;
height: 20px;
width: 125px;
background-color: #FF66B2;
float: right;
border-left: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
color: #000000;
font-weight: bold;
}
div#menu2 {
font-family: calibri, sans-serif;
height: 20px;
width: 125px;
background-color: #990000;
float: right;
border-left: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
div#menu3 {
font-family: calibri, sans-serif;
height: 20px;
width: 125px;
background-color: #FFE5CC;
float: right;
border-left: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
color: #000000;
font-weight: bold;
}
p {
font-family: calibri, sans-serif;
margin-left: 10px;
margin-right: 10px;
}
/* For tablets and large phones: */
@media (min-width: 768px) and (max-width: 991px) {
background-color: green;
.col-m-1 {
width: 25%;
}
.col-m-2 {
width: 25%;
}
.col-m-3 {
width: 50%;
}
}
/* For Desktop */
@media only screen and (min-width:992px) {
.col-1 {
width: 33.33%;
}
.col-2 {
width: 33.33%;
}
.col-3 {
width: 33.33%;
}
}<h1>Our Menu</h1>
<div class="container1 .col-1 .col-m-1">
<div id="menu1">Chicken</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor
</p>
</div>
<div class="container2 .col-2 .col-m-2">
<div id="menu2">Beef</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor.
</p>
</div>
<div class="container3 .col-3 .col-m-3">
<div id="menu3">Sushi</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor.
</p>
</div>桌面：
平板电脑：
手机：
【问题讨论】：
-
如果你了解 flex box css 就很简单：css-tricks.com/snippets/css/a-guide-to-flexbox
-
@GeekyQuentin，感谢您的帮助。我注意到在平板电脑视图中，当寿司项目移动到第二排时，它并没有跨越鸡肉和牛肉项目的长度。你能帮忙吗？媒体查询中使用的断点也未应用。