這是我用html和css做的菜單。 如你所見，我們有3個(gè)盒子。我希望所有的盒子都有相同的高度。我不能使用Flexbox，因?yàn)楸仨殤?yīng)用以下規(guī)則。 我使用了12 grid框架來使網(wǎng)頁對(duì)桌面、平板和移動(dòng)設(shè)備做出響應(yīng)。當(dāng)屏幕的寬度大于992像素時(shí)，這3個(gè)框被分別指定為寬度的33.33%。如果屏幕寬度在991像素和768像素之間，前兩個(gè)框必須占寬度的50%，第三個(gè)框占整個(gè)屏幕寬度。如果屏幕寬度小于767px，每個(gè)框必須占寬度的100%。
/* Base style */
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
font-family: fantasy, sans-serif;
}
h1 {
text-align: center;
margin-bottom: 15px;
margin-top: 40px;
}
.container {
position: relative;
margin: 15px;
}
.row {
width: 100%;
}
section > div {
position: relative;
top: 0px;
border: 2px solid black;
background-color: rgb(250, 255, 190);
margin: 15px;
padding: 10px;
}
div > p {
text-align: justify;
margin-top: 50px;
font-size: 100%;
}
label {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
text-align: center;
border-left: 2px solid black;
border-bottom: 2px solid black;
}
h3 {
margin: 15px 0px 15px 0px;
}
#title-1 {
background-color: #9f7b59;
color: #fff0dc;
}
#title-2 {
background-color: #a76e69;
}
#title-3 {
background-color: #0c1b44;
color: #8e8c6a;
}
/* Desktop */
@media (min-width: 992px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
/* Mobile */
@media (max-width: 767px) {
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
float: left;
}
.col-sm-1 {
width: 8.33%;
}
.col-sm-2 {
width: 16.66%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33%;
}
.col-sm-5 {
width: 41.66%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33%;
}
.col-sm-8 {
width: 66.66%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33%;
}
.col-sm-11 {
width: 91.66%;
}
.col-sm-12 {
width: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<title>Coursera Module 2 Assignment</title>
</head>
<body>
<header>
<h1>Menu!</h1>
</header>
<main>
<div class="container">
<div class="row">
<section class="col-lg-4 col-md-6 col-sm-12">
<div>
<label id="title-1"><h3>Chicken</h3></label>
<p>
Chicken is the most common type of poultry in the world. Owing
to the relative ease and low cost of raising chickens in
comparison to mammals such as cattle or hogs chicken meat and
chicken eggs have become prevalent in numerous cuisines.
</p>
</div>
</section>
<section class="col-lg-4 col-md-6 col-sm-12">
<div>
<label id="title-2"><h3>Beef</h3></label>
<p>
Beef is the culinary name for meat from cattle. In prehistoric
times, humankind hunted aurochs and later domesticated them.
Since that time, numerous breeds of cattle have been bred
specifically for the quality or quantity of their meat.
</p>
</div>
</section>
<section class="col-lg-4 col-md-12 col-sm-12">
<div>
<label id="title-3"><h3>Sushi</h3></label>
<p>
Sushi is a Japanese dish of prepared vinegared rice, usually
with some sugar and salt, accompanied by a variety of
ingredients, such as seafood often raw and vegetables. Styles of
sushi and its presentation vary widely, but the one key
ingredient is "sushi rice", also referred to as shari, or
sumeshi.
</p>
</div>
</section>
</div>
</div>
</main>
</body>
</html>為此使用CSS-Grid。
如果使用grid-auto-rows: 1fr，那么所有的行將具有相同的高度(最高行的高度)。您可以使用網(wǎng)格-模板-列定義的列數(shù)，這些列將平均劃分空間:
.row {
display: grid;
grid-auto-rows: 1fr;
gap: 0.5em;
}
@media only screen
and (min-width: 768px) {
.row {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen
and (min-width: 992px) {
.row {
grid-template-columns: repeat(3, 1fr);
}
}<div class="row">
<section class="col-lg-4 col-md-6 col-sm-12">
<div>
<label id="title-1"><h3>Chicken</h3></label>
<p>
Chicken is the most common type of poultry in the world. Owing to the relative ease and low cost of raising chickens in comparison to mammals such as cattle or hogs chicken meat and chicken eggs have become prevalent in numerous cuisines.
</p>
</div>
</section>
<section class="col-lg-4 col-md-6 col-sm-12">
<div>
<label id="title-2"><h3>Beef</h3></label>
<p>
Beef is the culinary name for meat from cattle. In prehistoric times, humankind hunted aurochs and later domesticated them. Since that time, numerous breeds of cattle have been bred specifically for the quality or quantity of their meat.
</p>
</div>
</section>
<section class="col-lg-4 col-md-12 col-sm-12">
<div>
<label id="title-3"><h3>Sushi</h3></label>
<p>
Sushi is a Japanese dish of prepared vinegared rice, usually with some sugar and salt, accompanied by a variety of ingredients, such as seafood often raw and vegetables. Styles of sushi and its presentation vary widely, but the one key ingredient is "sushi
rice", also referred to as shari, or sumeshi.
</p>
</div>
</section>
</div>flex布局不能實(shí)現(xiàn)多行高度相同，所以我用網(wǎng)格布局重新調(diào)整了它。謝謝@tacoshy的提醒。希望這個(gè)回答能幫到你。
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
font-family: fantasy, sans-serif;
}
h1 {
text-align: center;
margin-bottom: 15px;
margin-top: 40px;
}
.container {
position: relative;
margin: 15px;
}
section {
padding: 8px;
}
section > div {
position: relative;
top: 0px;
border: 2px solid black;
background-color: rgb(250, 255, 190);
height: 100%;
padding: 8px;
}
div > p {
text-align: justify;
margin-top: 50px;
font-size: 100%;
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.row {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas: 'a b c';
}
/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
.row {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas: 'a b' 'c c';
}
}
/* Mobile */
@media (max-width: 767px) {
.row {
grid-template-columns: 100%;
grid-template-rows: repeat(3, 1fr);
grid-template-areas: 'a' 'b' 'c';
}
}
label {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
text-align: center;
border-left: 2px solid black;
border-bottom: 2px solid black;
}
h3 {
margin: 15px 0px 15px 0px;
}
#title-1 {
background-color: #9f7b59;
color: #fff0dc;
}
#title-2 {
background-color: #a76e69;
}
#title-3 {
background-color: #0c1b44;
color: #8e8c6a;
}<header>
<h1>Menu!</h1>
</header>
<main>
<div class="container">
<div class="row">
<section class="item1">
<div>
<label id="title-1"><h3>Chicken</h3></label>
<p>
Chicken is the most common type of poultry in the world. Owing
to the relative ease and low cost of raising chickens in
comparison to mammals such as cattle or hogs chicken meat and
chicken eggs have become prevalent in numerous cuisines.
</p>
</div>
</section>
<section class="item2">
<div>
<label id="title-2"><h3>Beef</h3></label>
<p>
Beef is the culinary name for meat from cattle. In prehistoric
times, humankind hunted aurochs and later domesticated them.
Since that time, numerous breeds of cattle have been bred
specifically for the quality or quantity of their meat.
</p>
</div>
</section>
<section class="item3">
<div>
<label id="title-3"><h3>Sushi</h3></label>
<p>
Sushi is a Japanese dish of prepared vinegared rice, usually
with some sugar and salt, accompanied by a variety of
ingredients, such as seafood often raw and vegetables. Styles of
sushi and its presentation vary widely, but the one key
ingredient is "sushi rice", also referred to as shari, or
sumeshi.
</p>
</div>
</section>
</div>
</div>
</main>