html - 元素对齐问题

Question

我在对齐元素时遇到问题。

我有一些元素出现在其他元素中，例如我的红色背景段落在我的图像上方，我的第二篇文章在我的第一篇文章上方。

我已经用 float 尝试过很多测试，但它不起作用。

你看出问题出在哪里了吗？

这是一个显示我的问题的例子: http://jsfiddle.net/2tsmX/3/

我的 html:

<div id="body_news">
    <div id="body-news1">
        <h1>News</h1> 
        <article id="news">
            <div class="img_container">
                <img  src="../image.jpg"/>        
            </div>
            <h2><a href="#" >Títule Of the News</a></h2>
            <span>Date of the news</span>
            <p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here 
            </p>
        </article> 
        <article id="news">
            <div class="img_container">
                <img  src="../image.jpg"/>        
            </div>   
            <h2><a href="#" >Títule Of the News</a></h2>
            <span>Date of the news</span>
            <p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here 
            </p>
        </article>
    </div>
</div>

我的CSS:

#body_news1
{
    float:left;
    width:480px;
}

#body_news1 h1
{
    font-size:25px;
    font-weight:100;
    margin-bottom:10px;
}

.img_container
{
   width: 160px;
   height: 165px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
   margin-right:20px; 
   border:3px solid #f3f3f3;
   margin-top:4px;   
}

#body_news
{
    width:480px;
    height:auto;
    margin:0 auto 0 auto;
}

#news
{
    margin-bottom:5px; 
    position:relative;
    background:yellow;
     width:480px;
    text-align:left;
}

#news h2 a
{
    font-size:20px;  
    color:#000; 
    text-decoration:none;
    margin-left:0;
}

#news span 
{   
    font-size:14px; 
}

#news p
{
    margin-top:5px;
    margin-bottom:5px;
    background:red; 
}

Answer 1

你想做这样的事情吗？

HTML

<div id="body_news">
    <div id="body-news1">
        <h1>News</h1> 
        <article class="news">
                <div class="img_container">
                    <img  src="../image.jpg"/>        
                </div>
                <h2><a href="#" >Title Of the News</a></h2>
                <span>Date of the news</span>
                <p>
               text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here 
               </p>
         </article> 
          <article class="news">
                <div class="img_container">
                    <img  src="../image.jpg"/>        
                </div>   
                <h2><a href="#" >Title Of the News</a></h2>
                <span>Date of the news</span>
                <p>
               text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here 
               </p>
        </article>
  </div>
</div>

CSS

#body_news1
{
width:480px;
}

#body_news1 h1
{
font-size:25px;
font-weight:100;
margin-bottom:10px;
}

.img_container
{
   width: 160px;
   height: 165px;
   float: left;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
   margin-right:20px; 
   border:3px solid #f3f3f3;
   margin-top:4px;   
}

#body_news
{
width:480px;
margin:0 auto 0 auto;
}

.news
{
margin-bottom:5px; 
background:yellow;
    min-height:185px;
}

.news h2 a
{
font-size:20px;  
color:#000; 
text-decoration:none;
    margin-left:0;
}

.news span 
{   
font-size:14px; 
}

.news p
{
margin-top:5px;
margin-bottom:5px;
background:red; 
}

http://jsfiddle.net/2tsmX/9/