改变侧边栏的位置

Question

 .page-wrapper { grid-template-columns: 100%; }.middle-wrapper { max-width: 960px; margin-left: auto; margin-right: auto; padding: 25px; border: 3px solid #ffffff; }.main-page-content { margin-bottom: 0.5rem; padding: 0; }.title1 { font-family: tahoma; font-size: 20px; text-align: center; margin-bottom: 2rem; } p { margin: 1rem 0 2rem; }.callout { background: rgba(238, 238, 238, 0.395); border-radius: var(--elem-radius); box-shadow: rgb(95, 95, 95); display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0; padding: 2rem; text-align: left; }.boxed { border: 1px solid rgb(78, 78, 78); padding: 1rem; width: 37em; margin-left: auto; margin-right: auto; }.textinrect { word-spacing: 100px; }.sidebar { grid-area: sidebar; padding-top: 3rem; max-width: 200px; }.list { list-style: none; padding-left: 0.5em; }.sidebar-heading { color: Black; font-size: 18px; font-family: tahoma; letter-spacing: 1.5px; margin-left: 7px; }.subject-header { color: rgba(0, 0, 0, 0.749); font-size: 14px; font-family: tahoma; letter-spacing: 1px; }.subject { margin-bottom: 1em; }.toggle { margin-bottom: 15px; }.sub-topic { color: black; }.toggle1 { padding-top: 1em; }.toggle0 { list-style: none; padding-left: 1.5em; } a { text-decoration: none; }

 <,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"> <title>Document</title> <link rel="stylesheet" href="fortest.css"> </head> <body> <div class="page-wrapper"> <div class="main-wrapper"> <div class="middle-wrapper"> <article class="main-page-content"> <h2 class="title1">How to create an HTML website</h2> <div class="section1"> <p>1. Nav Bar</p> <div class="callout"> <div class="boxed"> <div class="textinrect"> Yourwebsitename home about page3 </div> </div> </div> </div> </article> </div> <aside class="sidebar"> <nav class="sidebar-inner"> <p class="sidebar-heading">Subjects</p> <div> <ol class="list"> <li class="subject"> <a href="#"> <h5 class="subject-header">Subject1</h5> </a> </li> <li class="toggle"> <details> <summary> All the school sunjects </summary> <ol class="toggle0"> <li class="toggle1"> <a class="sub-topic" href="#">The molecular mass and power</a> </li> <li class="toggle1"> <a class="sub-topic" href="#">the molecular mass and power</a> </li> </ol> </details> </li> <li class="toggle"> <details> <summary> Not all school subjects </summary> </details> </li> </ol> </div> </nav> </aside> </div> </body> </html>

My goal is that the sidebar stays on the side at the very beginning of the document on the left side of the main text.我的目标是侧边栏位于正文左侧文档开头的一侧。 For some reason it says down below the main section.出于某种原因，它在主要部分下方显示。 I know this is a matter of position but I can not find the correct position.我知道这是位置问题，但我找不到正确的位置。 I would deeply appreciate any answer that you may give.如果您能给出任何答复，我将不胜感激。

Answer 1

Try this,试试这个，

#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
/*position: fixed;*/ //remove it
}

#content {
float: left; // change right to left
width: 564px;
padding-top: 30px;
}

改变侧边栏的位置

问题描述

1 个解决方案

解决方案1
0 2022-12-20 23:27:33

改变侧边栏的位置

问题描述

1 个解决方案

解决方案1 0 2022-12-20 23:27:33

解决方案1
0 2022-12-20 23:27:33