Question

我在调整元素方面遇到了问题。

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

我已经尝试过使用花车的许多测试，但它不起作用。

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

这是一个显示我的问题的示例： 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

简单修复 - 在<div style="clear:both;"></div>之后添加<span>Date of the news</span> 每个div

示例：

<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>
           <div style="clear:both;"></div> <!--HERE-->
                    <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>
            <div style="clear:both;"></div> <!--HERE-->
                    <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>

FIDDLE

Answer 2

你想做这样的事吗？

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/

元素对齐问题

2 个答案: