邊框底部屬性不會出現在地方

這裏是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>

現在我只想一個幫助，我只是想知道爲什麼邊框底部的屬性不會去正是我希望它是什麼？它出現在中間的某個地方。

能否請您指導我解決這個錯誤？

謝謝

來源

2013-02-27 user1689231

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

來源

2013-02-27 05:23:05 Wex

感謝@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; }

來源

2013-02-27 05:23:42

你需要指定一個溢出的寬度：隱藏的技巧工作，不是嗎？所以，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;看看。

來源

2013-02-27 05:25:40

我絕對不會建議任何人使用'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/

來源

2013-02-27 05:35:16 FelipeAls

邊框底部屬性不會出現在地方

回答

相關問題