CSS的问题放在第一个以上的第二个元素

我有一个节有两个新闻文章的HTML是正确的，但CSS的结果是第二个文章是第一个以上。任何建议表示感谢提前感谢。CSS的问题放在第一个以上的第二个元素

下面是结果的图像：

enter image description here

我的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;}

来源

2014-03-27 OzzC

你有两个具有相同ID的元素会建议使用类来代替。我不确定这是否只是一个想法而引起你的问题。 – vikingben

感谢您的提示..但它不是主要问题！ – OzzC

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

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

建议：使用class insted的id。

来源

2014-03-27 01:44:54 Iqbal

感谢您的回答，但这不是问题，或者至少是主要问题。你能看到这个jsfiddle吗？ http://jsfiddle.net/mibb/5sype/4/ – OzzC

它就像我在＃loop-news中有一个border-bottom，并且border-bottom不在文章结尾。我不明白为什么，但我想这就是问题所在！ – OzzC

为什么在'p'段落中使用'height'？ – Iqbal

你真的已经收到了正确的答案，因为你的元素的高度是固定的，没有剩下的html空间。由于我无法在评论中粘贴代码，并且我赞成给出的答案，所以我想我会按照自己的方式抛出一些示例代码。我希望这是你正在寻找的东西，它可以帮助你。这就是使用类而不是id的意思，对于不需要添加父选择器的核心元素也是如此。

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

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

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

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

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

a { 
text-decoration:none; 
font-size:20px; 
color:#FF0; 
font-weight:100; 
font-family:arial; 
} 

span { 
font-family:bariolthin; 
font-size:14px; 
font-weight:400; 
color:blue; 
text-align:center; 
margin:0 auto; 
} 

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


<section id="loop-news-container"> 
    <h2>NEws</h2> 
    <article class="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 class="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>

来源

2014-03-27 02:09:52 vikingben

CSS的问题放在第一个以上的第二个元素

回答

相关问题