在附加的代码片段中，网格的“标题”部分具有左对齐的文本。如何添加与网格最右侧部分对齐的附加文本？另外，我想知道如何使文本垂直居中，因为它目前位于中间上方。我尝试添加另一个 div 并使用 justify-content 和align-items，但到目前为止我所做的一切都不起作用。将不胜感激任何帮助。谢谢。
body {
display: grid;
grid-template-areas: "header header header" "nav article ads" "nav footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header,
footer,
article,
nav,
div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas: "header" "article" "ads" "nav" "footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>最佳答案
您可以创建左和右<div>标题中的元素，然后为标题指定以下样式:
#pageHeader {
display: flex;
align-items: center; /*center children*/
justify-content: space-between; /*separate children*/
}
请参阅下面的示例片段:
body {
display: grid;
grid-template-areas: "header header header" "nav article ads" "nav footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header,
footer,
article,
nav,
div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
display: flex;
align-items: center;
justify-content: space-between;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas: "header" "article" "ads" "nav" "footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}<!doctype html>
<title>CSS Grid Template 1</title>
<link rel="stylesheet" href="style.css">
<body>
<header id="pageHeader">
<div class="left">Header left</div>
<div class="right">Header right</div>
</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>关于css - 如何在此 CSS 网格中将内容放置在标题的左侧和右侧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64282079/