CSS高度，如何讓它繞過內部divs

爲什麼我的邊框不能繞過我的內部div，而我的內部div邊框不會到達外部div的底部（在FF中，但需要這適用於所有主流瀏覽器）。CSS高度，如何讓它繞過內部divs

能有人幫

<div id="main"> 
    <div class="insidediv"> 
     <p>Article 1</p> 
    </div> 
    <div class="insidediv"> 
     <p>Article 2</p> 

    </div> 
    <div class="insidediv"> 
<p>Article 3</p> 
    </div> 
</div> 

#main{ 
    width: 800px; 
    height: 100%; 
    border: 20px solid black; 
} 

.insidediv{ 
    width: 200px; 
    height: 100%; 
    border-right: 20px solid black; 
    float:left; 
}

來源

2012-10-23 David

「內部div邊框不會到達外部div的底部」 - 您需要爲內部邊框堆滿更多內容才能達到外部div的底部。嘗試在

大量內容

內放置大量樣本內容。 –

@YogeshNath讓我們添加一艘船到這個內容 - 也許會有幫助？或任何其他想法？ – AdityaSaxena

@AdityaSaxena - 諷刺。你的評論如何添加對帖子有用的內容？ –

阿爾特#main到float: left;或overflow:hidden。我推薦浮動

來源

2012-10-23 10:16:40 Andy

集overflow: hidden;上#main。

編輯：demo

來源

2012-10-23 10:15:27 oal

當您將內容輸入到其中一個內部div時，其他邊框不會向下延伸。 – David

浮動元素將它們帶出文檔的正常流程，這意味着它們的容器不再理解它們在哪裏結束，因爲缺少更多的技術說明。爲了解決這個問題，你需要清除最後一個內部div後的float，方法是添加一個清除元素：兩者都應用。 http://jsfiddle.net/calder12/BcqnE/

<div id="main"> 
<div class="insidediv"> 
    <p>Article 1</p> 
</div> 
<div class="insidediv"> 
    <p>Article 2</p> 

</div> 
<div class="insidediv"> 
<p>Article 3</p> 
</div><div class="clear"</div> 
</div> 

#main{ 
width: 800px; 
height: 100%; 
border: 20px solid black; 
} 

.insidediv{ 
width: 200px; 
height: 100%; 
border-right: 20px solid black; 
float:left; 
} 
.clear{clear:both;}

也有clearfix方法，其類似於上面的但更標準的方法，這些天。 http://j.mp/bestclearfix

來源

2012-10-23 11:03:11

我會推薦使用[.clearfix]（http://j.mp/bestclearfix）而不是這個黑客。 – Labu

Clearfix更常見，但我不會打電話清除這種方式的黑客比我會打電話clearfix黑客。他們都是合法的解決方案。注意解決方案中的倒數第二條規則？不知道爲什麼它在那個位置？嗯。 –

我並不是指貶低意義上的「黑客」。 Clearfix只是一個更優雅的解決方案。 – Labu

CSS高度，如何讓它繞過內部divs

回答

相關問題