Question

我有一节有两篇新闻文章，html是正确的，但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;}

Answer 1

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

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

建议：使用id。

的类

Answer 2

你真的已经收到了正确答案，因为元素的高度已经固定，其余的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>

CSS问题首先放置第二条元素

2 个答案: