时间戳

首页 > 解决方案 > 为什么 grid-template-areas 中指定的顺序格式不正确？它部分有效，但旁边的标签没有到达正确的位置

html - 为什么 grid-template-areas 中指定的顺序格式不正确？它部分有效，但旁边的标签没有到达正确的位置

问题描述

我需要将备用标签放在（部分标题）和（.summary）下方，然后将其余内容放在其下方。您将在网格模板区域中看到顺序应该是“#zen-intro:first-child”、“.sidebar”、“#zen-intro:nth-child(2)”、“#zen-supporting ”。我想我是直接指定的。我只需要更改 CSS。否则我肯定会重做 HTML。

.page-wrapper {
  margin: 3em;
  display: grid;
  grid-template-columns: auto;
  grid-template-areas: 
    "#zen-intro:first-child" 
    ".sidebar" 
    "#zen-intro:nth-child(2)" 
    "#zen-supporting";
}

<!DOCTYPE html>
<html lang="en">
    <body id="css-zen-garden">
    <div class="page-wrapper">

        <section class="intro" id="zen-intro">
            <header role="banner">
                <p>header stuff</p>
            </header>

            <div class="summary" id="zen-summary" role="article">
                <p>Content</p>
            </div>

            <div class="preamble" id="zen-preamble" role="article">
                <p>content</p>
            </div>
        </section>

        <div class="main supporting" id="zen-supporting" role="main">
            <div class="explanation" id="zen-explanation" role="article">
                <p>content</p>
            </div>

            <div class="participation" id="zen-participation" role="article">
                <p>content</p>
            </div>

            <div class="benefits" id="zen-benefits" role="article">
               
                <p>content</p>
            </div>

            <div class="requirements" id="zen-requirements" role="article">
            <p>content</p>

            <footer>
                <p>footer stuff</p>
            </footer>

        </div>


        <aside class="sidebar" role="complementary">
            <div class="wrapper">
                 <p>Nav stuff</p>
            </div>
        </aside>


    </div>

    </body>
</html>

页脚显示的旁边：

页脚显示的旁边

需要显示在（节标题）和（.summary）下：

需要显示在（节标题）和（.summary）下

链接到codepen

标签： htmlcsscss-grid

解决方案

推荐阅读