html - CSS 问题将第二篇文章元素放在第一位

Question

我有一个包含两篇新闻文章的部分，html 是正确的，但 CSS 的结果是第二篇文章在第一篇文章之上。提前感谢任何建议。

这是结果的图片:

我的 jsfiddle: http://jsfiddle.net/mibb/5sype/2/

我的 html:

<section id="loop-news-container">
<h2>NEws</h2>
    <article id="loop-news">
         <a href="#"></a>
         <h1><a href="#">Title of News</a></h1>
         <span>Date of Post 1</span> 
         <img src="image1.jpg" /> 
          <p>Post 1. <a  href="#" >read more</a></p>
    </article>
    <article id="loop-news">
     <a href="#"></a>
         <h1><a href="#">Title 2 Inside of the Post 1</a></h1>
         <span>Date 2 inside of Post 1</span> 
         <img src="image1.jpg" /> 
          <p>Post 2 inside of Post 1<a  href="#" >read more</a></p>
    </article>

</section>

我的CSS:

#loop-news-container {
    width:100%;
    height:auto;
    float:left;
    margin-top:5px;

}
#loop-news {
    width:320px;
    height:250px;
    background:#fff;
   margin-top:10px;
    margin-bottom:10px;
    text-align:center;
    border-bottom:1px solid #f3f3f3;


}
#loop-news-container h2{font-family:'arial';
    font-size:25px;
    margin-bottom:10px;
    font-weight:100;
    color:green; 
    text-align:center;}

#loop-news h1 {
    font-family:'arial';
    text-align:center;
    font-family:'arial';
    margin:0 auto 0 auto;
    position:relative;
    text-decoration:none;
}

#loop-news p {font-family:'arial';
    font-size: 17px;  
    text-align:justify;
    line-height:25px;
    height:25px;
    width:310px;
    margin:0 auto;
    }

#loop-news h1 a {
    text-decoration:none;
    font-size:20px;
    color:yellow;
    font-weight:100;
    font-family:'arial';
}
#loop-news span {
    font-family:'bariolthin';
    font-size:14px;
    font-weight:normal;
    color:blue;
    margin:0 auto 0 auto;
    text-align:center;

}

#loop-news a {font-family:'arial';
    font-size:14px; 
    text-decoration:none;
    color:red;
    margin-left:2px;}

#loop-news img {margin-top:5px;margin-bottom:5px; width:246px;}

Answer 1

这是因为你给article一个固定的高度。

#loop-news {
    /*height:250px;*/
}

建议:使用 class 代替 id。