我正在尝试在一个 div 中使用填充，它被另一个 div(“容器”)包装，对于这个简单的问题深表歉意，但我找不到答案。
只要我不使用 padding:10px;页面结构稳定。
即右侧的 div 向左浮动(“内容”位于“侧边栏”旁边)。
<html>
<head>
<style type="text/css">
.container {
max-width: 960px;
background-color: RED;
height: 200px;}
.sidebar {
background-color: GREEN;
width: 30%;
float: left;}
.content {
background-color: YELLOW;
float: left;
width: 70%;
padding: 10px;}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<p>text in sidebar</p>
</div>
<div class="content">
<p>text in content</p>
</div>
</div>
</body>
</html>
使用 padding:10px; 时右侧的 div(“内容”)在“侧边栏”下方，而不是 float 到“侧边栏”的一侧。
我试过了 clear: left; (对，两者都有)但这对我没有帮助。
上述的任何解决方案，并且不是 <p> 的特定样式, 将不胜感激。
最佳答案
为了避免超过 100% 的页面宽度并使 .content 下降，您可能必须做出一些妥协。我可以想到一些解决方案:
1) 填充.content的所有直接子节点
.content > * {
padding-left:10px;
}
2) 使用百分比填充.content
.content {
padding-left:2%;
width:68%;
}
3) 改变盒子模型的行为
.content {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
所有这三种解决方案都会带来一些坏的事情。
- 填充
.content的所有直接子元素可能会在您想要为元素提供 10px 以外的填充时导致问题。 - 使用百分比填充
.content在不同大小的窗口上看起来会略有不同。 - 如果您不知道自己在做什么，则更改盒子模型的行为可能会很糟糕，因为它会将默认的标准 CSS 模型更改为未被广泛使用的模型(在本例中，我们基本上是在告诉现代浏览器使用 IE 的 quirksmode 框模型)，但这似乎是适合您的情况的最佳解决方案。它基本上没有问题，除了缺乏对 IE7 的支持，IE7 仅占浏览器市场份额的 2% 左右。
关于html - 如何在div中正确使用padding？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11805011/