个人中心
gpt4 book ai didi

html - 如何放置

转载 作者：行者123 更新时间：2023-11-28 01:07:24 25 4
gpt4 key购买 nike

我一直在使用各种技术来尝试解决我遇到的这个问题。我正在创建另一个关于自助的实践网站(即无意发布)。我正在尝试放置一个侧边栏，其中包含历史上人们的名言。但是我的旁边元素(边栏)不会出现在主要内容旁边。

我试过将主要内容放在“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 新闻网站一样)。我已经尝试将旁边的宽度减小到 50 像素，将主容器的宽度减小到 750 像素(总计 800 像素)，但这也不会并排放置两个容器。

更新:9 月 13 日

我按照建议在文档正文中添加了“display: flex”，旁边的栏当然已经向上移动，但它毁坏了整个文档。标题现在位于左侧而不是顶部。页脚也变成了垂直的，现在倾斜文本。

有人可以帮我把页眉和页脚元素放在它们应该在的地方吗？页脚应该在最底部。标题应该在最顶部的导航栏下方(即不是现在的位置)。谢谢。

Screenshot of the edit

最佳答案

首先，将元素命名为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>

关于html - 如何放置 <aside> 元素 'aside' 主要内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52279056/

25 4 0
文章推荐： 自应用程序启动以来获取时间的 c++ 可移植方法？
文章推荐： php - 在此页面中悬停不起作用，我不知道为什么，即使我已经给了它，页脚也没有占用 100% 的宽度
文章推荐： javascript - 在 DalekJS 中迭代 DOM 元素
文章推荐： c++ - 使用 boost 图进行图像分割
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com