浮动左禁用填充答案

【问题标题】：Float-left disabled padding浮动左禁用填充
【发布时间】：2014-01-21 20:09:09
【问题描述】：

两个 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%;
}

有人可以向我解释为什么会这样吗？

谢谢

【问题讨论】：

我觉得不错：jsfiddle.net/88upt/1
它在顶部、右侧和底部应用了填充，而不是在左侧？
它应用正确，只是它是从最左边渲染的。检查此更新：jsfiddle.net/88upt/6 你会知道我在说什么
使绿色框半透明显示了为什么会发生这种情况：jsfiddle.net/88upt/7 你会注意到蓝色和红色框在左侧实际上有超过 30px 的填充，它只是被浮动块隐藏了.

标签： html css

【解决方案1】：

浮动的东西有点像让它的位置绝对。它将悬停在其相邻容器的顶部。添加一个等于浮动元素宽度的 margin-left 以使容器具有正确的宽度。

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

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

编辑详细说明。

浮动元素将兄弟元素的内容推到上面。它不会推动内容元素的左侧。填充在那里它只是被浮动元素隐藏。

【讨论】：

【解决方案2】：

在#middle 中添加overflow = "auto"。

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

这样你就不需要知道浮动元素的宽度了。

【讨论】：

【解决方案3】：

宽度不考虑填充。

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

宽度仅适用于内容，不适用于内边距、边框或边距。

你可以找到更多information here.

【讨论】：

那么有没有快速解决问题的方法？
检查我的最新编辑。我已经链接到一个应该回答你的问题的问题。或者你可以直接点击here
它在顶部、右侧和底部应用了填充，而不是在左侧？