主要内容不是从顶部开始，在桌面视图中被推离页面

Question

使用媒体查询，我将最小宽度设置为 680px。我已将其设置为导航栏位于屏幕左侧的位置。问题是你所看到的就是这些。本应位于右侧的主要内容被推到了屏幕下方。我不认为这是宽度问题，但如果我错了，请纠正我。附：我有许多主要内容的主要部分元素。存储库：https://github.com/GojuNoah/Reponsive-Web-Design-Tech-Doc-Practice/tree/main

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #FAF0E6;
  margin: 0;
  padding: 0;
}

#navbar {
  background-color: #B9B4C7;
}

#navbar li a:hover {
  background-color: #5C5470;
  color: #FAF0E6;
}

.main-section {
  margin: 0 auto;
  padding: 10px;
  letter-spacing: .2;
}

.main-section header {
  font-size: 1.5em;
  font-weight: 600;
}

pre,
code {
  white-space: pre-wrap;
  font-family: monospace;
}

#conclusion li a:hover {
  color: #B9B4C7;
}

#conclusion,
ul {
  list-style: none;
}

#conclusion li a {
  text-decoration: none;
  color: #352F44;
  display: block;
  padding: 2px;
}

@media (min-width: 680px) {
  body {
    width: 100vw;
  }
  .main-section {
    margin-left: 30vw;
  }
  #navbar {
    position: sticky;
    top: 0;
    width: 30vw;
    height: 100vh;
    border-right: 2px solid #5C5470;
  }
  #navbar ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #navbar li {
    text-align: center;
    width: 100%;
  }
  #navbar a {
    color: #352F44;
    text-decoration: none;
    display: block;
    border: 1px solid black;
    text-align: left;
    padding: 10px;
    font-size: 1.5em;
    margin: 2px;
  }
  #navbar header {
    font-size: 2.5em;
    text-align: left;
    padding: 10px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}

<body>
  <main id="main-doc">
    <nav id="navbar" aria-label="Main Navigation">
      <ul>
        <li>
          <header>Responsive Design</header>
        </li>
        <li><a class="nav-link" href="#introduction">Introduction</a></li>
        <li><a class="nav-link" href="#flexible_images">Flexible Images</a></li>
        <li><a class="nav-link" href="#media_queries">Media Queries</a></li>
        <li><a class="nav-link" href="#viewport_meta_tag">Viewport Meta Tag</a></li>
        <li><a class="nav-link" href="#mobile_first_design">Mobile First Design</a></li>
        <li><a class="nav-link" href="#flexbox">Flexbox</a></li>
        <li><a class="nav-link" href="#conclusion">Conclusion</a></li>
      </ul>
    </nav>

    <section class="main-section" id="introduction">
      <header>Introduction</header>
      <p class="info">Responsive Web Design is a combination of code to make websites look the way it should, no matter the size of the screen. It also includes accessibility. Design the website so that even those who use screen readers can understand what the webpage
        is about.</p>
      <header>Why is it important?</header>
      <p class="info">A Responsive Web Design is arguably the most important thing you need for a website besides the content of the website itself. It makes everything easier to look at, read, and understand for the end user. Whether they are using a phone, laptop,
        desktop, tablet, etc; They can read and understand the webpage. Accessibility users can know whats on the webpage. Images aren't stretched out or covering anything up. All this makes the website more desirable to stay on.</p>
    </section>

Answer 1

将 flexbox 应用于您的

<main id="main-doc">

包装器应该可以完成工作。

#main-doc {
  display: flex;
  align-items: start;
}

在上图中，我删除了

margin-left

属性。

.main-section {
 /* margin-left: 30vw; */
}

主要内容不是从顶部开始，在桌面视图中被推离页面

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

1个回答

最新问题

主要内容不是从顶部开始，在桌面视图中被推离页面

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

1个回答

最新问题

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