非常第一篇文章，请原谅我，并告诉我在这里发布的不正确之处，非常感谢。
尝试为Coursera课程“HTML, CSS, and Javascript for Web Developers”制作一个简单的网站示例。我将发布首先给出的目标和图像，然后发布我的html/css，然后发布完全混乱的第二个版本（如果需要，请告知如何在以后的帖子中做得更好。不{{1}在此项目中允许使用任何其他Bootstrap。
尝试缩小页面frameworks，而不是仅针对每种媒体大小使用特定的像素大小。忽略其他最可能的字体大小等错误（除非你想给我一些关于我做错的建议，我欢迎这样做）。重点是将三个宽容器的“行”100％宽度下降到两行，第一行中有2 fully responsive 100％宽度，第二行中有1个容器100％宽度。然后再缩小到三行，每个容器100％宽。所有这些都在下面链接的项目目标中有更详细的说明。
我遇到的另一个问题是在当前版本的最后一个容器之后的右侧多余的空间，因为我找不到导致它的原因，因为我将边距设置为0并且容器的宽度设置为100％。 / p>
我尝试通过为它们指定不同的col类和基本宽度来创建containers，然后让css grid更改它们而不做任何更改。
我的HTML：
@media我的CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment Solution for Module 2</title>
<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto|Sansita" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<h1>Our Menu</h1>
<div id="container">
<!-- Chicken Container -->
<div id="op-1" class="menu">
<div class="food-type chicken">Chicken
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Beef Container -->
<div id="op-2" class="menu">
<div class="food-type beef">Beef
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Sushi Container -->
<div id="op-3" class="menu">
<div class="food-type sushi">Sushi
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
</body>
</html>
版本2尝试使用CSS网格 - HTML
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*===============================================
My CSS Styles
=============================================== */
* {
box-sizing: border-box;
}
body {
background: #fff;
box-sizing: border-box;
font-family: raleway; roboto; ransita; sans-serif;
font-size: 200%;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
margin: 30px 0 50px 0;
}
#container {
width: 100%;
max-width: 100%;
margin: 0px;
padding: 10px;
/*display: flex;
justify-content: space-between; */
}
.menu {
float:left;
width:30%;
margin: 10px;
background: grey;
border: 1px solid #000;
font-size: .75em;
position: relative;
}
/*
div.foo {
background: grey;
border: 1px solid #000;
font-size: .75em;
position: relative;
}
*/
div.food-type {
text-align: center;
font-weight: bold;
padding: 10px;
width: 30%;
position: relative;
float: right;
/*left: 70%;*/
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
div.chicken {
background: pink;
}
div.beef {
background: red;
color: #fff;
}
div.sushi {
background: yellow;
}
p {
color: #fff;
padding: 10px;
font-size: .75em;
clear: right;
}
@media all (min-width: 992px) {
.menu {width: 33.33%;}
}
@media all (min-width: 768px) and (max-width: 991px) {
#op-1.menu #op-2.menu {width: 50%;}
#id-3.menu {width: 100%;}
}
@media all (max-width: 767px) {
.menu {width: 100%;}
}
CSS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment Solution for Module 2</title>
<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto|Sansita" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles2.css">
</head>
<body>
<h1>Our Menu</h1>
<div id="grid-container">
<!-- Chicken Container -->
<div id="op-1" class="menu col-2 col-3 col-6">
<div class="food-type chicken">
Chicken
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Beef Container -->
<div id="op-2" class="menu col-2 col-3 col-6">
<div class="food-type beef">
Beef
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Sushi Container -->
<div id="op-3" class="menu op-3 col-2 col-3 col-6">
<div class="food-type sushi">
Sushi
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
</body>
</html>
非常感谢，对不起这么多话，请再次告诉我如何改进以后的帖子。
答案 0 :(得分：1)
您的媒体查询中有两个问题：缺少单词＆＃39;和＆＃39;在第二个媒体查询中选择器＃op-1.menu和$ op-2.menu之间的规则和逗号（，）之间。
以下是更正的媒体查询
@media all and (min-width: 992px) {
.menu {width: 30%;}
}
@media all and (min-width: 768px) and (max-width: 991px) {
#op-1.menu, #op-2.menu {width: 47%;}
#op-3.menu {width: 100%;}
}
@media all and (max-width: 767px) {
.menu {width: 100%;}
}
答案 1 :(得分：0)
如果您使用min-width的媒体查询，则css中的顺序从小到高，否则如果依靠max-width，则必须从大屏幕到小屏幕。
解决方案：每当您使用媒体查询时，请仔细考虑css中的顺序，以便级联而不是覆盖自己。当您使用min-width作为参数时，切换媒体查询的顺序，使其从小屏幕变为大屏幕。
答案 2 :(得分：0)
您已定义@media查询，如下所示：
@media all and (min-width: 992px) { ... }
@media all 后缺少关键字
这里有一些要点，例如根据每个菜单框左/右侧的10px边距找到实际宽度。例如，当所有3个盒子在大屏幕尺寸中都可见时，我们可以将宽度设置为：
width: calc( (100% - 60px) / 3 ); /* 60px is 3*20, ( 20px = 10+10 Left+Right Margins) */
我修改了你的代码如下：
* {
box-sizing: border-box;
}
body {
background: #fff;
box-sizing: border-box;
font-family: raleway, roboto, ransita, sans-serif; /* **change ; to , */
font-size: 200%;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
margin: 30px 0 50px 0;
}
#container {
width: 100%;
max-width: 100%;
margin: 0px;
padding: 10px;
/*display: flex;
justify-content: space-between; */
}
.menu {
float:left;
width:30%;
margin: 10px;
background: grey;
border: 1px solid #000;
font-size: .75em;
position: relative;
/*box-sizing: border-box;*/
}
/*
div.foo {
background: grey;
border: 1px solid #000;
font-size: .75em;
position: relative;
}
*/
div.food-type {
text-align: center;
font-weight: bold;
padding: 10px;
width: 40%; /* *** */
/*position: relative;*/
float: right;
/*left: 70%;*/
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
div.chicken {
background: pink;
}
div.beef {
background: red;
color: #fff;
}
div.sushi {
background: yellow;
}
p {
color: #fff;
padding: 10px;
font-size: .75em;
clear: right;
}
@media all and (min-width: 992px) { /* width > 992px */
.menu {width: calc( (100% - 60px) / 3 ); } /* 31% */
}
@media all and (min-width: 768px) and (max-width: 991px) { /* 768px < width < 991px */
#op-1.menu {width: calc( (100% - 40px) / 2 );} /* 47% */
#op-2.menu {width: calc( (100% - 40px) / 2 );}
#op-3.menu {width: calc(100% - 20px);}
}
@media all and (max-width: 767px) { /* width < 768px */
.menu {width: calc(100% - 20px);}
} <h1>Our Menu</h1>
<div id="container">
<!-- Chicken Container -->
<div id="op-1" class="menu">
<div class="food-type chicken">
Chicken
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Beef Container -->
<div id="op-2" class="menu">
<div class="food-type beef">
Beef
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
<!-- Sushi Container -->
<div id="op-3" class="menu">
<div class="food-type sushi">
Sushi
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
答案 3 :(得分：0)
您的媒体查询中没有一个在语法上是正确的。
@media all (min-width: 992px) {
需要
@media all and (min-width: 992px) {
答案 4 :(得分：0)
这是我的另一个答案，为菜单框项添加父div，并使用其padding代替内部菜单框中的margin。这种方法的主要优点是可以将所有尺寸（33.33％，50％，100％）设置为我们需要的精确值（参见@media宽度），而无需使用特殊的估计值或计算公式或javascript ...
body {
background: #fff;
box-sizing: border-box;
font-family: raleway, roboto, ransita, sans-serif; /* **change ; to , */
font-size: 200%;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
margin: 30px 0 50px 0;
}
#container {
width: 100%;
max-width: 100%;
margin: 0px;
padding: 10px;
box-sizing: border-box; /* apply it to main container */
}
.menu { /* menu external box */
float: left;
padding: 10px; /* instead of inner menu margin */
width: 33.33%; /* just a default width for case we are at large screens */
box-sizing: border-box; /* apply it to main container */
}
.menu > div { /* menu internal box (menu-child) */
/*float:left;*/ /* EDIT! moved to parent div */
width:100%; /* EDIT! fill whole of parent, the size is set by parent */
/*margin: 10px;*/ /* EDIT! set by padding of parent div */
background: grey;
border: 1px solid #000;
font-size: .75em;
}
div.food-type {
text-align: center;
font-weight: bold;
padding: 10px 5px; /* padding-left & right could be less as we center title text */
width: 40%; /* or width: auto; min-width: 33%; to ensure large titles not overflow the width size */
float: right;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
div.chicken {
background: pink;
}
div.beef {
background: red;
color: #fff;
}
div.sushi {
background: yellow;
}
p {
color: #fff;
padding: 10px;
font-size: .75em;
clear: right;
}
@media all and (min-width: 992px) { /* width > 992px */
.menu { width:33.33%; padding:10px; float:left;}
}
@media all and (min-width: 768px) and (max-width: 991px) { /* 768px < width < 991px */
#op-1.menu {width: 50%;}
#op-2.menu {width: 50%;}
#op-3.menu {width: 100%;}
}
@media all and (max-width: 767px) { /* width < 768px */
.menu {width: 100%;}
}<h1>Our Menu</h1>
<div id="container">
<!-- Chicken Container -->
<div id="op-1" class="menu">
<div> <!-- class="menu-child" -->
<div class="food-type chicken">
Chicken
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
<!-- Beef Container -->
<div id="op-2" class="menu">
<div> <!-- class="menu-child" -->
<div class="food-type beef">
Beef
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
<!-- Sushi Container -->
<div id="op-3" class="menu">
<div> <!-- class="menu-child" -->
<div class="food-type sushi">
Sushi
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
</div>
</div>
</div>