浮动左侧禁用填充

两个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

浮动左侧禁用填充

回答

相关问题