浮動左側禁用填充

兩個div並排排列，其中一個浮動寬度爲25％，另一個寬度爲75％。但是，當在右側div上應用填充時，填充無法正常工作。浮動左側禁用填充

下面是一個例子的jsfiddle：

<div id="top"> 
</div> 
<div id="middle"> 
</div> 
<div id="bottom"> 
</div>

CSS

#top { 
float: left; 
background-color: green; 
width: 25%; 
height: 100%; 
} 
#middle { 
background-color: blue; 
padding: 30px; 
min-height: 30%; 
} 
#bottom { 
background-color: red; 
min-height: 70%; 
}

爲什麼會這樣有人能解釋一下嗎？

謝謝

來源

2013-05-20 user2403162

看起來對我很好：http://jsfiddle.net/88upt/1/ – karthikr

它有填充應用在頂部，右側和底部，只是不在左側？ – user2403162

它應用正確，只是它從最左邊呈現。檢查此更新：http://jsfiddle.net/88upt/6/你會知道我在說什麼 – karthikr

漂浮的東西是那種喜歡做它的位置是絕對的。它將懸停在相鄰容器的頂部。添加一個等於浮動元素寬度的邊距左邊以使容器具有正確的寬度。

http://jsfiddle.net/88upt/4/

#middle { 
    background-color: blue; 
    padding: 30px; 
    min-height: 30%; 
    margin-left:25% 
}

編輯闡述了稍多一點。

浮動元素將同級元素的內容壓入。它不會推動內容元素的左側。填充是在那裏，它只是浮動元素隱藏。

來源

2013-05-20 20:46:27 Knyri

非常感謝謝謝！ – user2403162

-1

寬度不包括填充。

enter image description here

來源：http://www.w3schools.com/css/css_boxmodel.asp

寬度僅適用於內容，而不是填充，邊框或保證金。

你可以找到更多information here.

來源

2013-05-20 20:40:49 Johannes

那麼是否有解決這個問題的快速解決方案？ – user2403162

查看我的最新編輯。我已經鏈接到應該回答你的問題的問題。或者你可以點擊[這裏]（http://stackoverflow.com/a/4698091/573634） – Johannes

它有填充應用在頂部，右側和底部，而不是左側？ – user2403162

在#middle中添加overflow =「auto」。

#middle { 
background-color: blue; 
padding: 30px; 
min-height: 30%; 
overflow: auto; 
}

這樣，您不需要知道浮動元素的寬度。

來源

2014-01-21 12:09:09

浮動左側禁用填充

回答

相關問題