如何在div中正确使用填充？

时间：2012-08-04 00:47:18

标签： html css

我正在尝试在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（'content'）会在'sidebar'下面而不是浮动到'sidebar'侧面。

我已经尝试clear: left;（对，两者都有），但这对我没有帮助。

上述任何解决方案并不是<p>的特定风格，我们将不胜感激。

4 个答案:

答案 0 :(得分：5)

为了避免超过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;         
}

所有这三种解决方案都会产生一些糟糕的事物。

  1. 当您想要提供10px以外的元素填充时，填充.content的所有直接子节点可能会导致问题。
  2. 使用百分比的填充.content在不同大小的窗口上看起来会略有不同。
  3. 如果您不知道自己在做什么，更改框模型的行为可能会很糟糕，因为它会将默认的标准CSS模型更改为未广泛使用的模型（在此示例中，我们基本上讲现代浏览器使用IEs quirksmode box model），但它似乎是适合您案例的最佳解决方案。它基本上没有任何问题，除了IE7缺乏支持，IE7仅占浏览器市场份额的2％左右。

答案 1 :(得分：1)

这种行为是完全正确的。请记住所谓的盒子模型（简称）：

  

边距，边框和填充都将添加到宽度值

在这种情况下，你必须计算

30% + 10px + 70% + 10px = 100% + 20px

浏览器开始支持css属性box-sizing（有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/CSS/box-sizing）。您可以将其设置为border-box以更改默认的盒子模型。

但请记住也要使用这些浏览器后缀：

box-sizing: border-box;
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box;

答案 2 :(得分：0)

这是一个常见问题，典型的网页设计不像我们的常用逻辑那样。

正在发生的事情是填充实际上使.content div变得比它分配的槽宽，从而迫使它在下面。

有几种解决方法。

此规则：box-sizing:border-box;使得如果您设置width:100px和padding:10px;，则无论如何，浏览器都会自动生成整个DIV 100px。

实际发生的是DIV变宽80px，任意一侧都有10px填充。

我创建了jsfiddle

浏览器对此规则的支持通常非常好，但请确保包含我在js中添加的所有规则（即，带有-webkit-，-moz-的规则，以及上面的规则是只是box-sizing:border-box;）

供参考，这里有所有规则：

 box-sizing:border-box;
 -moz-box-sizing:border-box; 
 -webkit-box-sizing:border-box;

答案 3 :(得分：0)

所有其他答案（到2020年9月10日）都集中在以下事实上：在.content DIV 中添加填充会使填充大于所需的70％，从而将其压入.sidebar < strong> DIV ，然后尝试将 DIV 的大小（包括填充）设为70％。最简单的答案是不填充.content DIV （因此它保持在.container DIV 的70％），而是填充 P 在里面。如果没有宽度规范，则内部 P 是 DIV 的100％，其中包括填充，因此 P 的文本将相应压缩（至100 .content DIV 的百分比-每边10像素）。所以改变

.content {
background-color: YELLOW;
float: left;
width: 70%;
padding: 10px;}

到

.content {
background-color: YELLOW;
float: left;
width: 70%;}

.content p {
padding: 10px;}

或者，在.content样式中添加box-sizing: border-box会更改大小计算以包括填充，但这是CSS3，而将填充移到 P 的版本更早。 （有人还在使用它吗？）

已经对此进行了测试，我只是有一个（修辞）问题。为什么同时浮动两个 DIV ？如果仅浮动.sidebar DIV ，则.content DIV 中的多余文本将在其下方流动（并且宽度现在位于.container 的左边缘> DIV ）。通过同时浮动两者，.content DIV 中的多余文本将保留在右侧，而在.sidebar DIV 下（如果其中少于.content的部分则留有空白区域） DIV ）。我假设这是目的，但这与使用2列表会产生完全相同的效果，

<html>
<head>
<style>
.table_container {
width: 100%;
max-width: 960px;
background-color: RED;}

.table_sidebar {
background-color: GREEN;
width: 30%;}

.table_content {
background-color: YELLOW;
width: 70%; /* unnecessary */
padding : 10px;}
</style>
</head>
<body>
<table class="table_container">
<tr>
<td class="table_sidebar">text in sidebar</td>
<td class="table_content">text in content</td>
</tr>
</table>
</body>
</html>

与原始（浮动 DIV ）解决方案确实有一些细微差别。

  1. 每个单元格之间都有微小的间隙。
  2. 侧边栏与内容的高度相同。
  3. 该表仅与其内容一样高（可能小于指定的200px）。
  4. TD 的内容没有上限或下限（ DIV 中 P 的默认CSS） 。
这些可以固定如下：

  1. 将border-spacing:0添加到.table_container，并（对于较旧的浏览器）将cellspacing="0"添加为 TABLE 的属性。
  2. 将rowspan="2"添加到内容 TD ，在侧边栏 TD 下添加一个空白的 TD ，然后强制侧边栏通过将height:1px添加到.table_sidebar，可以使TD尽可能低。
  3. 将桌子围在所需高度的 DIV 中。
  4. 添加 P 元素，这些元素在 TD 中具有明确定义的上下边距（ TD 中的 P 默认CSS） strong>显然没有边距。
<html>
<head>
<style>
.container {
max-width: 960px;
background-color: RED;
height: 200px;}

.table_container {
width: 100%;
background-color: RED;
border-spacing: 0;}

.table_sidebar {
background-color: GREEN;
width: 30%;
height: 1px;}

.table_content {
background-color: YELLOW;
/* width: 70%; still unnecessary */ 
padding : 10px;}

td p {
margin: 1em 0;}
</style>
</head>
<body>
<div class="container">
<table class="table_container" cellspacing="0">
<tr>
<td class="table_sidebar"><p>text in sidebar</p></td>
<td rowspan="2" class="table_content"><p>text in content</p></td>
</tr>
<tr><td></td></tr>
</table>
</div>
</body>
</html>

虽然两种方法产生的输出相同，但是 TABLE 方法对获得大小恰好的依赖程度要小得多。

相关问题
最新问题