英文:
Equal height boxes in html,css
问题
这是我使用HTML和CSS制作的菜单。
正如您所见，我们有3个框。我希望所有的框都具有相同的高度。我不能使用Flexbox，因为必须应用以下规则。
我使用了12网格框架来使网页在桌面、平板电脑和移动设备上具有响应性。当屏幕宽度大于992像素时，规定每个框的宽度为屏幕宽度的33.33%。如果屏幕宽度在991像素和768像素之间，则前两个框的宽度必须为屏幕宽度的50%，第三个框的宽度为屏幕宽度的100%。如果屏幕宽度小于767像素，每个框的宽度都必须为屏幕宽度的100%。
以下是您提供的HTML和CSS代码，无需翻译：
（请注意，这是您提供的代码的一部分，我已将其保留在原文中。）
英文:
This is a menu I made using html and css.
As you can see we have 3 boxes. I want all of the boxes to have the same height. I can't use Flexbox cause the following rule must be applied.
I used 12 grid framework to make the webpage responsive for desktops, tablets, and mobile. The 3 boxes are each specified to take 33.33% of the width when the width of the screen is more than 992px. If the screen width is between 991px and 768px the first two boxes must take 50% of the width and the third box take the whole width of the screen. And if the screen width is less than 767px each box must take 100% of the width.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/* 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%;
}
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
I tried using Flexbox, but that makes all boxes show in the same row/column, and the rule defined for responsive web won't apply anymore.
答案1
得分: 1
使用CSS-Grid来实现这个效果。
如果使用grid-auto-rows: 1fr，那么所有行的高度都将相同（与最高行的高度相同）。您可以使用grid-template-columns定义列数，它将等分空间：
.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>
英文:
Use CSS-Grid for that.
If you use grid-auto-rows: 1fr then all rows will have the same height (the height of the tallest row). The number of columns you can define with grid-template-columns which will equally divide the space:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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);
}
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: -1
The flex layout can't achieve the same height of multiple lines, so I readjusted it with the grid layout. Thank you @tacoshy for reminding me. I hope this answer can help you.
英文:
The flex layout can't achieve the same height of multiple lines, so I readjusted it with the grid layout. Thank you @tacoshy for reminding me. I hope this answer can help you.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论