如何让我的布局框响应式换行？

Question

我目前正在 Coursera 上学习 HTML、CSS 和 JS。我被赋予了使用非常简单的 HTML 和 CSS 重现响应式网页的任务，而无需使用框架、网格、flex 和 JS。我基本上已经完成了页面编码，但现在我遇到了两个问题，我认为这两个问题与边距和视口有关。页面应像这样响应屏幕大小：

桌面版：三个框在水平方向上各占页面的三分之一
平板电脑：前两个框应占屏幕的一半，第三个框应占下一行的 100%
移动：三个盒子应该堆叠

我可以重新创建桌面和移动视图，但不能重新创建平板电脑。在我的平板电脑视图中，第三个覆盖了前两个。我正在为此使用媒体查询。我已附上我的 HTML 和 CSS 代码。

另一个问题与页边距有关。我需要在盒子之间应用均匀的间距。但是，当我在桌面视图中使用边距时，第三个框会落在下一行。所以，我省略了它们。这是 GitHub https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md 任务的 link 以防我的解释不清楚。

提前致谢。我是菜鸟，但我想学习和提高。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: #ffb3ff;
}

body {
  font-family: "Truculenta", "Arial", sans-serif;
}

h1 {
  padding: 15px 0 15px 0;
  text-align: center;
  font-size: 1.75em;
}

.container {
  width: 100%;
  height: auto;
}

.box {
  background: #ffffe6;
  border: 1px solid black;
  position: relative;
  height: auto;
  margin-bottom: 10px;
}

p {
  padding: 40px 10px 4px 10px;
  text-align: justify;
}

h3 {
  text-align: center;
}

.label {
  border: 1px solid black;
  font-size: 1.25em;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}

#label1 {
  background: #73e600;
}

#label2 {
  background: #ff0055;
}

#label3 {
  background: #00bfff;
}


/* Desktop */

@media (min-width: 992px) and (max-width: 2560px) {
  .box {
    width: 33.33%;
    float: left;
  }
}


/* Tablet */

@media (min-width: 768px) and (max-width: 991px) {
  div#box1.box {
    width: 50%;
    float: left;
  }
  div#box2.box {
    width: 50%;
    float: left;
  }
  div#box3.box {
    width: 100%;
  }
}


/* Mobile */

@media (min-width: 320px) and (max-width: 767px) {
  .box {
    width: 100%;
  }
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Coursera Module 2 Assignment - Restaurant Menu</title>
  <link href="https://fonts.googleapis.com/css2?family=Truculenta" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Our Menu</h1>
  <div class="container">
    <div id="box1" class="box">
      <div class="label">
        <h3 id="label1">Chicken</h3>
      </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 ut aliquip ex ea commodo consequat.
      </p>
    </div>

    <div id="box2" class="box">
      <div class="label">
        <h3 id="label2">Beef</h3>
      </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 ut aliquip ex ea commodo consequat.
      </p>
    </div>

    <div id="box3" class="box">
      <div class="label">
        <h3 id="label3">Sushi</h3>
      </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 ut aliquip ex ea commodo consequat.
      </p>
    </div>

  </div>
</body>

Answer 1

我们可以让您的代码在两方面发挥作用：

将 float 的所有实例转换为 inline-block 显示
删除标记中三个 .box 元素之间的空格

但是，我会考虑使用 flexbox or grid 作为现代解决方案。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background-color: #ffb3ff;
}

body {
  font-family: "Truculenta", "Arial", sans-serif;
}

h1 {
  padding: 15px 0 15px 0;
  text-align: center;
  font-size: 1.75em;
}

.container {
  width: 100%;
  height: auto;
}

.box {
  display: inline-block;
  background: #ffffe6;
  border: 1px solid black;
  position: relative;
  height: auto;
  margin-bottom: 10px;
}

p {
  padding: 40px 10px 4px 10px;
  text-align: justify;
}

h3 {
  text-align: center;
}

.label {
  border: 1px solid black;
  font-size: 1.25em;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}

#label1 {
  background: #73e600;
}

#label2 {
  background: #ff0055;
}

#label3 {
  background: #00bfff;
}


/* Desktop */

@media (min-width: 992px) and (max-width: 2560px) {
  .box {
    width: 33.33%;
  }
}


/* Tablet */

@media (min-width: 768px) and (max-width: 991px) {
  div#box1.box {
    width: 50%;
  }
  div#box2.box {
    width: 50%;
  }
  div#box3.box {
    width: 100%;
  }
}


/* Mobile */

@media (min-width: 320px) and (max-width: 767px) {
  .box {
    width: 100%;
  }
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Coursera Module 2 Assignment - Restaurant Menu</title>
  <link href="https://fonts.googleapis.com/css2?family=Truculenta" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Our Menu</h1>
  <div class="container">
    <div id="box1" class="box">
      <div class="label">
        <h3 id="label1">Chicken</h3>
      </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 ut aliquip ex ea commodo consequat.
      </p>
    </div><div id="box2" class="box">
      <div class="label">
        <h3 id="label2">Beef</h3>
      </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 ut aliquip ex ea commodo consequat.
      </p>
    </div><div id="box3" class="box">
      <div class="label">
        <h3 id="label3">Sushi</h3>
      </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 ut aliquip ex ea commodo consequat.
      </p>
    </div>

  </div>
</body>

如何让我的布局框响应式换行？

How can I get my layout boxes to wrap responsively?

html

css

margin

media-queries

responsive-design