我目前正在学习html和css。在我的代码中，我使用网格框作为组织布局的主要方法。我认为可以将 grid 和 flex box 混合在一起。当我去实现 flex box 来避免重复类似的代码时，我无法让它像我希望的那样工作，最终不得不重复代码。如果有人可以帮助我了解我哪里出错了。我愿意接受任何建议。
我尝试实现一个主要采用网格框布局的弹性容器。它没有像我想要的那样以行格式出现，而是开始将弹性项目堆叠在一起。
下面是我的html代码和我的css代码。代码中的 java 脚本不起作用。我现在不关心那个。
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- the Proper Taco index html file
John Gallagher
04/19/2023
Version 1.0
-->
<!-- Setting metadata -->
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<meta charset="UTF-8" />
<meta name="keywords" content="taco, mobile, food, truck, carnitas, barbacoa, carne asada,
pollo asada, de birria, al pastor, mexican, Charlotte" />
<title>the Proper Taco</title>
<link rel="stylesheet" href="css/stylesheet.css" />
<!-- <link href="css/layout.css" rel="stylesheet" /> -->
<script src="script/timer.js" defer></script>
</head>
<body>
<nav class="top-split_navbar">
<a href="..\Project\index.html" >Home</a>   
<a href="..\Project\menu.html" class="split">Menu</a>   
</nav>
<header>
<div class="h_img">
<img src="img/Logo_1.png" alt="truck logo">
</div>
<div class="h_content">
the Proper Taco
</div>
</header>
<main>
<div>
<p>Eat! From our selection of eight mouth watering traditional tacos orginating from central America.</p>
</div>
<div>
<p>Drink! We've partnered with local breweries to bring 15 select beers to compliment any taco.</p>
</div>
<h3>Countdown to Cinco de Mayo</h3>
<div id="countdown">
<div><span id="dLeft">58</span><br />Days</div>
<div><span id="hLeft">10</span><br />Hrs</div>
<div><span id="mLeft">14</span><br />Mins</div>
<div><span id="sLeft">48</span><br />Secs</div>
</div>
</main>
<footer>
Contact Us: <a href="mailto:[email protected]" style="text-decoration: none">the Proper Taco</a>
</footer>
</body>
</html>
CSS 样式表
@charset "utf-8";
/* Style sheet for WEB 110-N851 Spring 2023
Author: John Gallagher
Date: 04/19/2023
*/
html{
background-color: #F26724;
}
body {
margin-left: auto;
margin-right: auto;
width: 100vw;
max-width: 98vw;
min-width: 500px;
font-family: 'Times New Roman', serif;
}
.top-split_navbar {
overflow: hidden;
width: 98vw;
/* border: 1px solid #A7CD3A; */
}
.top-split_navbar a {
float: left;
color: #571C1E;
font-size: 1.25em;
font-variant: small-caps;
font-weight: bold;
text-align: center;
text-decoration: none;
letter-spacing: 3px;
padding: 8px 16px;
}
.top-split_navbar a:hover {
background-color: #FF7F50;
color: #A7CD3A;
}
.top-split_navbar a.split {
float: right;
}
body > header {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 3fr;
grid-template-areas: "img text_content";
}
.h_img {
border-right: 1em solid rgb(87, 28, 30);
grid-area: img;
align-self: center;
}
.h_content {
grid-area: text_content;
font: bold 8.25em Trattatello;
color: rgb(87, 28, 30);
margin-left: 1.5em;
align-self: center;
}
main {
display: grid;
grid-template-rows: 40vh;
grid-template-columns: repeat(2, minmax(150px, 750px));
justify-content: space-evenly;
color: rgb(251, 229, 172);
font: bold 2em Trattatello;
text-align: center;
}
main > div::first-line {
color: rgb(251, 229, 172);
font: bold 5.5em Trattatello;
}
#m_img {
width: 100vw;
height: 300px;
align-self: left;
}
footer {
color: rgb(87, 28, 30);
font: bold 2em Trattatello;
text-align: center;
}
body > footer > a:link {
color: rgb(251, 229, 172);
}
body > footer > a:hover {
color: rgb(167, 205, 58);
}
div#countdown {
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
margin-top: 10px;
}
div#countdown div {
display: block;
text-align: center;
width: 100%;
line-height: 1.5em;
font-size: 0.5em;
font-family: segment14, sans-serif;
color: white;
background: rgba(51, 51, 51, 0.7);
margin: 0px 1px;
padding: 5px;
color: white;
}
div#countdown div span {
font-size: 2em;
}