我的 html 标签不会进入网格的“aside”部分

问题描述 投票：0回答：1

我在使用网格时遇到了问题。我设置了边界，除了我想要在屏幕右侧的旁边之外，所有内容都正确地进入网格。附带说明一下，这是使用 SASS。我还使用了浏览器上的检查器工具，它识别出我的旁边有一个网格区域。

我想要屏幕的一侧，但它一直位于网格的“主要”部分下方。 HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
<title>MR Blog</title>
</head>

<body>
    <section id="layout">
    <section id="main-nav">
        <nav>
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
        
        </ul>
        </nav>
        </section>
    
    <main>
        <section id="blog">
        <h1>Max's Blog</h1>
    
        
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna etiam tempor orci eu lobortis. In hac habitasse platea dictumst quisque sagittis purus sit. Viverra vitae congue eu consequat ac. Nec ultrices dui sapien eget. Tortor at auctor urna nunc id cursus metus aliquam eleifend. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Integer malesuada nunc vel risus. Dolor magna eget est lorem. At quis risus sed vulputate. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Odio pellentesque diam volutpat commodo sed egestas. Enim diam vulputate ut pharetra sit amet. Morbi tincidunt ornare massa eget egestas purus viverra accumsan. Ut ornare lectus sit amet. Velit egestas dui id ornare arcu odio ut. Viverra vitae congue eu consequat ac felis donec et. Ut tristique et egestas quis. Egestas integer eget aliquet nibh praesent.</p>

<p>Viverra tellus in hac habitasse platea. Pharetra vel turpis nunc eget lorem dolor. Nulla facilisi etiam dignissim diam quis enim. Turpis in eu mi bibendum neque egestas congue. Urna porttitor rhoncus dolor purus non enim praesent elementum. Dolor purus non enim praesent. A lacus vestibulum sed arcu. Viverra maecenas accumsan lacus vel. Ipsum a arcu cursus vitae congue mauris rhoncus aenean. Blandit turpis cursus in hac habitasse platea dictumst quisque. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Quis blandit turpis cursus in hac habitasse platea dictumst. Id diam maecenas ultricies mi eget mauris pharetra et. Sit amet consectetur adipiscing elit ut. Dignissim convallis aenean et tortor at risus viverra adipiscing at.</p>
        
        
        
        
        </section>
    <section class="social">
    <aside>
        <h3>Find Me Here!</h3>
        
        <p><a href="#">Twitter</a></p>
        <p><a href="#">Facebook</a></p>
        <p><a href="#">Instagram</a></p>
        
        
        </aside>
        </section>
    
    
    
    
    
    
    
    
    </main>
    <footer><p>&copy; Max Reitmayer 2023</p></footer>
    </section>
</body>
</html>

CSS：

#layout {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 5em 1fr auto;
  grid-template-rows: 5em 1fr auto;
  -ms-grid-columns: minmax(25em, 1fr) 16em;
  grid-template-columns: minmax(25em, 1fr) 16em;
      grid-template-areas: " nav nav" " main aside" " footer footer";
}

#main-nav {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: nav;
  background-color: green;
}

#blog {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: main;
  background-color: purple;
}

footer {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: footer;
  background-color: red;
}

#social {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: aside;
  background-color: orange;
  padding: 1em;
  padding-left: 45px;
}

#mav-nav {
  background: #242469;
  font-color: #D1B53B;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

我的布局的 SCSS：

#layout {
    display: grid;
 grid-template-rows:5em 1fr auto;
    grid-template-columns: minmax(25em, 1fr) 16em;
grid-template-areas:
" nav nav"
 " main aside"
 " footer footer";
    
}
#main-nav {
    grid-area: nav;
    background-color: green;
    }

 #blog {
    grid-area: main;
    background-color: purple;
    } 


footer {
    grid-area: footer;
    background-color: red;
    }
 #social {
    grid-area: aside;
    background-color: orange;
     padding: 1em;
  padding-left: 45px;
    }
html css sass css-grid
1个回答
0
投票

您的“aside”组件位于下方，因为它位于您的 

<main><main/>
标签中。只需将您的 HTML 更改为此，因为它将占用旁边的网格区域：

<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
<title>MR Blog</title>
</head>

<body>
    <section id="layout">
    <section id="main-nav">
        <nav>
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
        
        </ul>
        </nav>
        </section>
    
    <main>
        <section id="blog">
        <h1>Max's Blog</h1>
    
        
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna etiam tempor orci eu lobortis. In hac habitasse platea dictumst quisque sagittis purus sit. Viverra vitae congue eu consequat ac. Nec ultrices dui sapien eget. Tortor at auctor urna nunc id cursus metus aliquam eleifend. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Integer malesuada nunc vel risus. Dolor magna eget est lorem. At quis risus sed vulputate. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Odio pellentesque diam volutpat commodo sed egestas. Enim diam vulputate ut pharetra sit amet. Morbi tincidunt ornare massa eget egestas purus viverra accumsan. Ut ornare lectus sit amet. Velit egestas dui id ornare arcu odio ut. Viverra vitae congue eu consequat ac felis donec et. Ut tristique et egestas quis. Egestas integer eget aliquet nibh praesent.</p>

<p>Viverra tellus in hac habitasse platea. Pharetra vel turpis nunc eget lorem dolor. Nulla facilisi etiam dignissim diam quis enim. Turpis in eu mi bibendum neque egestas congue. Urna porttitor rhoncus dolor purus non enim praesent elementum. Dolor purus non enim praesent. A lacus vestibulum sed arcu. Viverra maecenas accumsan lacus vel. Ipsum a arcu cursus vitae congue mauris rhoncus aenean. Blandit turpis cursus in hac habitasse platea dictumst quisque. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Quis blandit turpis cursus in hac habitasse platea dictumst. Id diam maecenas ultricies mi eget mauris pharetra et. Sit amet consectetur adipiscing elit ut. Dignissim convallis aenean et tortor at risus viverra adipiscing at.</p> 
        
        </section>
    
    </main>
     <section class="social">
    <aside>
        <h3>Find Me Here!</h3>
        
        <p><a href="#">Twitter</a></p>
        <p><a href="#">Facebook</a></p>
        <p><a href="#">Instagram</a></p>
        
        
        </aside>
        </section>
    <footer><p>&copy; Max Reitmayer 2023</p></footer>
    </section>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.