如何讓我的布局框回應式包裝？-有解無憂

我目前正在 Coursera 上學習 HTML、CSS 和 JS。我的任務是在不使用框架、網格、flex 和 JS 的情況下使用非常簡單的 HTML 和 CSS 重現回應式網頁。我已經基本完成了對頁面的編碼，但現在我遇到了兩個問題，我相信這兩個問題與邊距和視口有關。頁面應該像這樣回應螢屏的大小：

桌面：三個框應分別占據頁面的三分之一水平
平板電腦：前兩個框應占螢屏的一半，第三個應占下一行的 100%
移動：三個盒子應該堆疊

我可以重新創建桌面和移動視圖，但不能重新創建平板電腦。在我的平板電腦視圖中，第三個涵蓋了前兩個。我正在為此使用媒體查詢。我附上了我的 HTML 和 CSS 代碼。

另一個問題與利潤有關。我需要在盒子之間應用均勻的間距。但是，當我在桌面視圖中使用邊距時，第三個框會落在下一行。所以，我省略了它們。這是 GitHub 上任務的鏈接https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md，以防我的解釋不清楚。

提前致謝。我是菜鳥，但我想學習和提高。

* {
  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>

uj5u.com熱心網友回復：

我們可以使您的代碼與兩件事一起作業：

將 float 的所有實體轉換為 inline-block 顯示
洗掉.box標記中三個元素之間的空格

但是，我會考慮使用flexbox或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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/480322.html

標籤：html css 响应式设计媒体查询利润

上一篇：標題選單阻止網站上的主要部分

下一篇：將URL寫入Django視圖中的變數中