Question

我一直在使用各种技术来尝试解决这个问题。我正在创建另一个有关自助的练习网站（即无意发布）。我正在尝试放置一个侧栏，其中包含整个历史中人们的报价。但是我的aside元素（侧边栏）不会出现在主要内容旁边。

我尝试将主要内容放在'main'标签内，并且'aside'元素在外面（即单独的容器），但是即使这样也不起作用。我试过使用float：right和其他技术，但无法使它正常工作。

任何帮助将不胜感激。谢谢...

body {
  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 {
  display: flex;
  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>

请注意，我的整个网站都放置在800像素宽的容器中（例如BBC新闻网站）。我曾尝试将aside设置为50px宽，将主容器设置为750px宽（总计800px宽），但这并没有将两个容器并排放置。

更新：9月13日

按照建议，我在文档正文中添加了“ display：flex”，并且aside列当然已经上移了，但是它破坏了整个文档的外观。现在，标题位于左侧，而不是应位于的顶部。页脚也已更改为垂直，现在使文本倾斜。

有人可以帮助我将页眉和页脚元素放在应该放置的位置吗？页脚应在最底部。标头应位于导航栏最顶部的下方（即现在不在此位置）。谢谢。

Answer 1

首先，命名元素aside不会告诉浏览器将其移到侧面。 html是框架，css负责位置，布局和总体设计。

从技术上讲，您要做的就是在父元素上声明display: flexbox：

main{display: flexbox;}

<main>
    <article>
    </article>
    <aside>
    </aside>
</main>

但是，您的原始示例还具有一些未闭合的标签，这些元素是异常的嵌套。不要想太多，保持简单。

body {
  width: 800px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  font-family: garamond, serif;
}

main{display: flex;}

#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: 30%;
  text-align: justify;
  margin-left: 30px;
}

footer {
  display: flex;
  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>
  <main>
    <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>
    <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>
  </main>
  <footer>
    <span>Mathew J. M. | 2018 ™</span>
    <span>Last updated: 11/09/2018</span>
  </footer>
</body>

</html>

如何将<aside>元素“置于”主要内容

1 个答案: