html5 中的 css 标题和侧边栏导航问题

Question

这是我的 html5 代码:

 <header id="header">
    <img src="img/logo.png" alt="logo" id="logo">
    <h1>The Articles</h1>
 </header>
 <section id="section">
    <article class="article">

          <img src="img/articles.png" alt="articles" />
          <p class="comments">
             by<span class="woo"> JOHN WOO</span> 
             <date>June 04, 2013, 22 Comments</date>
          </p>
          <h1 class="issue">Issue No 376</h1>
          <p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
          <p class="dev-express">asp.net, .net, dev-express</p>
          <a href="#" class="myButton">More</a>

       <div class="border-bottom"></div>
       <div class="article1">
          <img src="img/cat.png" alt="" />
          <p class="comments">
             by <span class="woo">JOHN WOO</span> 
             <date>June 04, 2013, 22 Comments</date>
          </p>
          <h1 class="issue">Issue No 375</h1>
          <p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
          <p class="dev-express">asp.net, .net, dev-express</p>
          <a href="#" class="myButton">More</a>
       </div>

    </article>
    </section>

这是我的 JSfiddle: http://jsfiddle.net/y3x8zqav/

现在我的网页看起来像这样:

http://imgur.com/GmNAWpx

在我标记的页面中，标题标题和旁边栏导航需要放在同一行。

这是定位导航的正确格式吗？

或者我可以知道 css 属性来解决这个问题吗？

任何帮助将不胜感激..

提前致谢。

Answer 1

检查您的网站后，您需要添加一些更改。这是要添加的 css 代码:

.aside {
   margin-top: -80px;
}

.aside > img {
   margin-top: 25px;
}

就是这样；