Question

我在网上发现了一些html / CSS练习，并尝试复制它们，但到目前为止还不错，但我无法对所有内容进行调整，我不知道该怎么做。

这是原作：

这就是我所拥有的：

菜单和最后的帖子与文章不在同一级别。为什么以及如何解决它？

我尝试过使用透明，填充和边距等等，但我什么都没做。

这是我的代码：

#main-header {
  background-color: yellow;
  text-align: center;
}

.articles {
  margin-left: 100px;
  margin-bottom: 500px;
  border-left: 2px solid green;
  padding-left: 10px;
}

#menu {
  float: left;
}

#last-posts {
  float: right;
  border-width: 2px;
  border-color: green;
  border-style: dashed;
  text-align: right;
  padding: 10px;
}

#last-posts h2,
ul {
  box-sizing: border-box;
}

ul {
  list-style: none;
  padding: 0;
}

.floaters {
  margin: 0;
}

.container {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <title>
    Excercise 1
  </title>
</head>

<body>
  <header id="main-header">
    <h1>My Blog About My Life</h1>
  </header>
  <div class="container">
    <aside id="menu" class="floaters">
      <h2>Menu</h2>
      <ul>
        <li><a href="#">Today</a></li>
        <li><a href="#">Yesterday</a></li>
        <li><a href="#">Last Week</a></li>
        <li><a href="#">Archives</a></li>
      </ul>
    </aside>

    <aside id="last-posts" class="floaters">
      <h2>Last posts</h2>
      <ul>
        <li><a href="#">Meething with supervisor</a></li>
        <li><a href="#">New Car!!</a></li>
        <li><a href="#">Visit My Parents</a></li>
      </ul>
    </aside>
    <div class="articles">
      <article>
        <h2>Meeting With Supervisor</h2>
        <small>14 Dec 2011</small>
        <p>Today I went to the university by bus.</p>
        <p>I had a meet with my PhD supervisor.</p>
      </article>

      <article>
        <h2> New Car!!!</h2>
        <small>12 Dec 2011</small>
        <p>Today I bought my new car. It's a Honda accord and it's really nice.</p>
        <p>I met some friends at a pub</p>
      </article>

      <article>
        <h2>Visit my parents</h2>
        <small>10 Dec 2011</small>
        <p>I tried to contact my PhD supervisor. He was out of his office.</p>
        <p>I visited my parents and we had a nice dinner together.</p>
      </article>
    </div>
  </div>
  <footer id="main-footer"> Contact me: <a href="#">johnnyblowjobs</a></footer>
</body>

</html>

Answer 1

菜单看起来不同，因为您可能已应用了CSS margin-top（这是一个浏览器默认样式）。

尝试添加：

h2 {
  margin-top: 0;
}

到“菜单”<h2>元素。

如何平衡我的所有网站内容？

1 个答案: