Question

我建立了我的第一个网站，一个我堂兄的婚礼网站，将有基本的部分，如婚礼，招待会，婚礼派对，RSVP等等，我打算有一个＆＃34;菜单＆＃34;在每个页面上排序，以指导用户去哪里，并提供如何到达那里的链接。

我打算为此使用<aside>，但我不确定这是否是最佳选择。如果是的话，我怎样才能正确地格式化它，让我们说距离.content对象10px？ As seen here,旁边的轮廓与.content的灰色框重叠。

Answer 1

您似乎正确使用了旁边标记，但这并不是真正的问题。

您看到的重叠是由左侧浮动造成的。浮动元素会将其从正常文档流中删除。

而不是使用float: left;尝试使用display: inline-block;

Working Example

＆＃13;

body {
  background-color: white;
  font-family: Georgia, Times, serif;
  padding: 0;
  margin: 0;
}
img.banner {
  display: block;
  margin: 0px auto;
}
img.title {
  width: 90%;
  display: block;
  margin: 0px auto;
}
figcaption {
  font-size: 150%;
  text-align: center;
}
header {
  width: 70%;
  margin: 10px;
  padding: 10px;
  margin-left: 15%;
  font-size: 200%;
  text-align: center;
  border: 3px solid #000000;
}
nav {
  background-color: blue;
  height: 30px;
  margin: 10px;
  padding: 10px;
}
.content {
  background-color: gray;
  width: 70%;
  padding: 10px;
  display: inline-block;
}
article {
  border: 3px solid #000000;
  margin: 10px;
}
aside {
  border: 3px solid #000000;
  height: 300px;
  width: 12%;
  padding: 0px 10px 0px 10px;
  display: inline-block;
  vertical-align: top;
}
footer {
  border: 3px solid #000000;
  width: 70%;
  margin-left: 15%;
  padding: 10px;
  height: 100px;
}

＆＃13;

<div id="page">
  <img src="http://placekitten.com/g/200/200" class="banner" alt="Banner" />
  <header>
    <p>Tom and Suzy's Wedding</p>
  </header>
  <aside>
  </aside>
  <div class="content">
    <figure>
      <article>
        <img src="http://placekitten.com/g/400/500" class="title" alt="Kitten" />
        <figcaption>August 1, 2015</figcaption>
      </article>
    </figure>
  </div>
  <footer>
  </footer>
</div>

＆＃13;

Answer 2

<aside>标记定义了一些内容，除了放置的内容，因此应该与您网页的周边内容相关（在您的情况下，它是婚礼，新娘派对）等）。为您使用<aside>标签完全没问题。如果您希望<aside>代码与.content对象相距10 像素，请替换您在 CSS 中编写的这行代码，您的<aside>代码：

padding: 0px 10px 0px 10px;

使用这行代码：

padding-right: 10px;

希望这有帮助！

我应该使用<aside>标签吗？如果是这样，我该如何正确放置？</aside>

2 个答案: