边框底部属性不会出现在地方

问题描述：

这里是URL http://jsfiddle.net/KpFj2/1/embedded/result/

   <article> 
       <div class="entry-meta"> 
        <div class="comment"><i class="icon-calendar"></i>25 Feb 2013</div> 
        <div class="calender"><i class="icon-comment"></i>22 Comments</div> 
       </div> 
       <div class="post-content"> 
        <h1>A New Beginning, A New Story</h1> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
        consequat. </p> 
       </div> 
      </article>

现在我只想一个帮助，我只是想知道为什么边框底部的属性不会去正是我希望它是什么？它出现在中间的某个地方。

能否请您指导我解决这个错误？

谢谢

答

你需要一些方法来清除你的花车。添加overflow:hidden到#content article

感谢@wex它帮助和合作。但是，你能告诉我为什么我必须让溢出：隐藏到这些项目？可能是下一次我不会要问呢:) – user1689231 2013-02-27 05:36:58

如果你在一个容器浮动元素，容器不再环绕该项目。告诉容器以包裹浮动元件周围的唯一方法是[清除浮]（http://alistapart.com/article/css-floats-101），或者通过使用'清楚：both'上的项目以下浮动元素，或者将“overflow：hidden”设置为容器。 – Wex 2013-02-27 08:37:28

答

您已漂浮在孩子的div而不清除它们。

有几个选项来解决这个问题：

HTML

<article> 
    <div class="entry-meta"></div> 
    <div class="post-content"></div> 
</article>

CSS

article { overflow: hidden; }

或

HTML

<article> 
    <div class="entry-meta"></div> 
    <div class="post-content"></div> 
    <br class="clear" /> 
</article>

CSS

.clear { clear:both; }

你需要指定一个溢出的宽度：隐藏的技巧工作，不是吗？所以，CSS将是'article {overflow：hidden;宽度：100％; }'不是吗？ – 2013-02-27 05:25:15

没有。宽度：自动;将工作。 – 2013-02-27 05:32:05

对不起......我问的是宽度是否必须指定，由像素，百分比或auto吧。只是想知道，因为你和Wex都没有规定任何宽度，我不确定我的信息是否过时。 – 2013-02-27 15:03:27

答

设置position: absolute;为#content article或使用overflow:hidden;看看。

我绝对不会建议任何人使用'position：absolute'，除非他们已经准备好处理从文档流中取出元素的后果。 – 2013-02-27 15:04:37

答

您正在使用HTML5 Boilerplate，其中.clearfix助手类已经存在以解决@Wex和@JesseLee描述的问题。

/* 
* Clearfix: contain floats 
* 
* For modern browsers 
* 1. The space content is one way to avoid an Opera bug when the 
* `contenteditable` attribute is included anywhere else in the document. 
* Otherwise it causes space to appear at the top and bottom of elements 
* that receive the `clearfix` class. 
* 2. The use of `table` rather than `block` is only necessary if using 
* `:before` to contain the top-margins of child elements. 
*/ 

.clearfix:before, 
.clearfix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clearfix:after { 
    clear: both; 
} 

/* 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 

.clearfix { 
    *zoom: 1; 
}

它在这个岗位从N.加拉格尔被描述：http://nicolasgallagher.com/micro-clearfix-hack/

你只需要这个类添加到您的article元素，如http://jsfiddle.net/KpFj2/2/

边框底部属性不会出现在地方

相关推荐