Question

我创建的自助网站仅出于练习目的。我在主要内容（不包括标题和页脚）的右侧放置一个“旁白”列（包含整个历史记录中的相关引号）时遇到问题。

“ float”属性将aside列放在所有内容的右侧，但将其放在底部。我尝试过使用“ flexbox”，这似乎可以解决有关“ aside”元素的问题，但是它将页脚垂直放置在内容的顶部（并覆盖其中的一部分），而不是水平放置在底部，以及移动内容左侧的标题（应位于静态导航栏的顶部）。这就是它的作用：

有人可以帮助我吗？我真的很感激。

body {
  display: flex;
  width: 800px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  font-family: garamond, serif;
}

#navbar {
  position: fixed;
  right: 0;
  left: 0;
}

.links {
  margin: 8px;  
  padding: 16px;
  background-color: orange;
  -webkit-border-radius: 75%;
  text-decoration: none;
  color: black;
  font-weight: 900;
  transition: opacity 0.5s linear;
}

.links:hover {
  opacity: 0.30;
  width: 
}

header {
  font-size: 25px;
  padding-top: 30px;
  color: orange;
  text-shadow: 8px 8px 16px grey;
}

#section1 {
  padding-top: 8px;
}

#section2 {
  padding-top: 16px;
  padding-bottom: 16px;
}

section p {
  text-align: justify;
}

#asideh2 {
  text-align: center;
}

aside {
  font-size: 12px;
  width: 15%;
  text-align: justify;
  float: right;
}

footer {
  justify-content: space-between;
  background-color: #d3d3d3;
  font-size: 12px;
  padding: 8px;
}

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <title>Self-Help Emporium</title>
  </head>
  <body>
    <nav id="navbar">
      <a class="links" id="link1" href="#">Home</a>
      <a class="links" id="link2" href="#">About</a>
      <a class="links" id="link3" href="#">Blog</a>
      <a class="links" id="link4" href="#">Contact</a>
      <a class="links" id="link5" href="#">Disclaimer</a>
    </nav>
    <header>
      <h1>Self-Help Emporium</h1>
      <h2>Your Trusted Source for Self-help Material</h2>
    </header>
    <article>
      <section id="section1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, elit ut vestibulum maximus, orci felis pulvinar velit, malesuada faucibus est lacus et arcu. Cras commodo est nec venenatis blandit. Nullam pretium feugiat ultricies. Proin accumsan, mi et convallis ullamcorper, turpis leo pretium justo, non tincidunt mi est vitae purus. Aenean ultrices scelerisque lacus, eget sagittis justo consectetur ac. Vestibulum interdum consectetur nibh ut lacinia. Aliquam ac fringilla lacus, ut scelerisque purus. Nulla faucibus fringilla varius. Quisque enim ante, placerat eget semper vitae, pulvinar bibendum mi. Maecenas pulvinar tempus tellus, ut consectetur purus feugiat vel. Nulla eget viverra urna. Nulla eu ex eu nisi accumsan scelerisque. Nullam et nulla bibendum, condimentum odio eget, aliquet sem. Nunc ornare volutpat urna ut feugiat.</p>
        <p>Maecenas scelerisque leo ipsum, id molestie dui auctor ac. Nunc feugiat laoreet tortor et convallis. Duis quis nisl et libero consectetur bibendum tempor at lectus. Praesent tristique, mi semper pharetra fermentum, metus orci porta ipsum, sit amet accumsan dolor tellus sit amet magna. Nam iaculis odio vel gravida egestas. Vestibulum venenatis est non orci pharetra ultricies. Fusce urna leo, commodo a ex vel, cursus semper sem. Etiam rutrum at est ut volutpat. Etiam vitae ullamcorper lectus. Duis tempus maximus nisi, eu aliquet felis congue ut. Donec erat arcu, malesuada eu ligula quis, consectetur suscipit mauris. Mauris commodo tortor ac elit euismod facilisis.</p>
        <p>Vestibulum porttitor pulvinar erat finibus molestie. In at felis eu augue feugiat ullamcorper in ut sapien. Pellentesque gravida eros non sapien convallis ullamcorper. Vivamus magna odio, tristique sed sapien aliquet, dictum aliquet augue. Nunc lorem quam, rutrum quis nulla euismod, ornare aliquet urna. Nullam lobortis malesuada nisl, vitae mattis purus pharetra nec. Duis enim est, malesuada quis odio ac, rutrum luctus nisl. Morbi tortor risus, posuere quis orci ut, pulvinar luctus lectus. Mauris auctor risus ut dapibus mattis. Suspendisse euismod felis mauris, sit amet rhoncus lacus posuere et. In scelerisque lacus vel arcu pellentesque facilisis. Aliquam nisl tortor, cursus ac tincidunt luctus, malesuada quis lectus.</p>
      </section>
      <section id="section2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, elit ut vestibulum maximus, orci felis pulvinar velit, malesuada faucibus est lacus et arcu. Cras commodo est nec venenatis blandit. Nullam pretium feugiat ultricies. Proin accumsan, mi et convallis ullamcorper, turpis leo pretium justo, non tincidunt mi est vitae purus. Aenean ultrices scelerisque lacus, eget sagittis justo consectetur ac. Vestibulum interdum consectetur nibh ut lacinia. Aliquam ac fringilla lacus, ut scelerisque purus. Nulla faucibus fringilla varius. Quisque enim ante, placerat eget semper vitae, pulvinar bibendum mi. Maecenas pulvinar tempus tellus, ut consectetur purus feugiat vel. Nulla eget viverra urna. Nulla eu ex eu nisi accumsan scelerisque. Nullam et nulla bibendum, condimentum odio eget, aliquet sem. Nunc ornare volutpat urna ut feugiat.</p>
        <p>Maecenas scelerisque leo ipsum, id molestie dui auctor ac. Nunc feugiat laoreet tortor et convallis. Duis quis nisl et libero consectetur bibendum tempor at lectus. Praesent tristique, mi semper pharetra fermentum, metus orci porta ipsum, sit amet accumsan dolor tellus sit amet magna. Nam iaculis odio vel gravida egestas. Vestibulum venenatis est non orci pharetra ultricies. Fusce urna leo, commodo a ex vel, cursus semper sem. Etiam rutrum at est ut volutpat. Etiam vitae ullamcorper lectus. Duis tempus maximus nisi, eu aliquet felis congue ut. Donec erat arcu, malesuada eu ligula quis, consectetur suscipit mauris. Mauris commodo tortor ac elit euismod facilisis.</p>
        <p>Vestibulum porttitor pulvinar erat finibus molestie. In at felis eu augue feugiat ullamcorper in ut sapien. Pellentesque gravida eros non sapien convallis ullamcorper. Vivamus magna odio, tristique sed sapien aliquet, dictum aliquet augue. Nunc lorem quam, rutrum quis nulla euismod, ornare aliquet urna. Nullam lobortis malesuada nisl, vitae mattis purus pharetra nec. Duis enim est, malesuada quis odio ac, rutrum luctus nisl. Morbi tortor risus, posuere quis orci ut, pulvinar luctus lectus. Mauris auctor risus ut dapibus mattis. Suspendisse euismod felis mauris, sit amet rhoncus lacus posuere et. In scelerisque lacus vel arcu pellentesque facilisis. Aliquam nisl tortor, cursus ac tincidunt luctus, malesuada quis lectus.</p>
      </section>
    </article>
    <form>
    </form>
    </main>
    <footer>
      <span>Mathew J. M. | 2018 ™</span>
      <span>Last updated: 11/09/2018</span>
    </footer>
  <aside>
    <h2 id="asideh2">Self-Help Quotes:</h2>
      <p>No matter where you are in life, you’ll save a lot of time by not worrying too much about what other people think about you. The earlier in your life that you can learn that, the easier the rest of it will be.</p>
      <p>Our only limitations in life are those we set up in our own minds.</p>
      <p>Focus on what you can control: your actions. How you react to negative feelings will be the key to your success.</p>
      <p>Don’t Take Anything Personally. Nothing others do is because of you. What others say and do is a projection of their own reality, their own dream. When you are immune to the opinions of others, you won’t be the victim of needless suffering.</p>
    </aside>
  </body>
</html>

已编辑：如您在屏幕快照中所见，页脚是垂直的，并且覆盖了主要内容的一部分。标头已移至主要内容的左侧。这是由于使用“ flexbox”引起的。如果我不使用'flexbox'，则'aside'元素中的'Self-Help Quotes'将放置在内容下方而不是侧面。

Answer 1

您可以将Flexbox display: flex用于固定或粘性位置position: fixed。

Answer 2

我通过在flexbox中添加一个'div'容器解决了这个问题。我将标题，导航栏和页脚保留在flexbox容器之外。

注意：在下面的图片中，我还没有为'aside'元素添加空间和样式。

如何在主要内容的右侧放置一列？

2 个答案: