Question

如何将<aside>放在<body>旁边的右侧？我在CSS中尝试了<aside align=right>和aside{ align-self: right}，但它不起作用。

Answer 1

＆＃13;

body {
  font-family: Calibri, Helvetica, Arial, Tahoma, sans serif;
  color: #333;
  background-color: #fff;
  padding: 0;
  margin: 0;
}

header, main, aside, footer {
   padding: 6px;
   margin: 0;
    box-sizing: border-box;
}

header {
  display: block;
  background-color: #d10373;
  color: #fff;
  }

main {
  width:100%;
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;
flex-wrap: wrap;
}

article {
   width: 80%;
}

aside {
   width: 19%;
   background-color: #ffccff;
   }
   
footer {
  display: block;
  clear: both;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 40px;
  background-color: #333;
  color: #fff;
  }

＆＃13;

<body>
   <header>Your header goes here</header>
   <main>
       <article>
   Your article goes here
       </article>
       <aside>
            <ul>
              <li>This</li>
              <li>is</li>
              <li>your</li>
              <li>aside</li>
            </ul>
       </aside>
   </main>
   <footer>
   Here's a footer
   </footer>
</body>

＆＃13;

请注意，<aside>位于<body>内，而内容容器称为<main>。

你可以learn how to use HTML5 semantic elements here。

这里是guide to using flex-wrap。

如何在页面右侧设置<aside>元素？

1 个答案: