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

时间:2014-08-25 05:33:18

标签: css html5

这是我的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属性来解决这个问题吗?

任何帮助都将受到高度赞赏..

提前致谢。

1 个答案:

答案 0 :(得分:0)

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

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

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

那就是它;