5

我正在尝试在 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

4 回答 4

6

为了避免超过 100% 的页面宽度并向.content下颠簸，您可能必须做出一些妥协。我能想到几个解决方案：

1）填充所有直接子级.content

.content > * {
    padding-left:10px;
}

​</p>

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. .content当你想给一个元素填充不是 10px 时，填充 的所有直接子级可能会导致问题。
  2. 使用百分比填充.content在不同大小的窗口上看起来会略有不同。
  3. 如果您不知道自己在做什么，那么更改盒子模型的行为可能会很糟糕，因为它会将默认的标准 CSS 模型更改为未广泛使用的模型（在此示例中，我们基本上是在告诉现代浏览器使用IEs quirksmode box model），但它似乎是您案例的最佳解决方案。它基本上没有问题，除了缺乏对 IE7 的支持，IE7 仅占浏览器市场份额的 2% 左右。
于 2012-08-04T00:57:51.630 回答
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;
于 2012-08-04T00:53:31.480 回答
0

这是一个常见的问题，典型的网页设计不符合我们常见的逻辑所期望的方式。

正在发生的事情是填充实际上使.contentdiv 变得比其分配的插槽更宽，从而迫使它向下。

有几种方法可以解决这个问题。

这条规则：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;
于 2012-08-04T00:57:23.150 回答
0

所有其他答案（截至 2020 年 10 月）都集中在将填充添加到 .content DIV使其大于所需的 70% 导致它被推到 .sidebar DIV下然后尝试使DIV大小为70% 包括填充物。最简单的答案是不填充 .content DIV（因此它保持在 .container DIV的 70% ），而是填充其中的P。如果没有宽度规范，内部P是DIV的 100%，包括填充，因此P的文本将相应地压缩（到 .content DIV的 100% - 每边 10px）。所以改变

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

到

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

.content p {
padding: 10px;}

或者，添加box-sizing: border-box到 .content 样式会更改大小计算以包括填充，但这是 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. 该表格仅与其内容一样高（可能小于指定的 200 像素）。
  4. TD的内容没有上边距或下边距（DIV中P的默认 CSS ）。
这些可以固定如下：

  1. 添加border-spacing:0到.table_containerand （对于旧版浏览器）cellspacing="0"作为TABLE的属性。
  2. 添加rowspan="2"到内容TD ，在侧边栏TD下方添加一个空的TD并通过添加到强制侧边栏TD尽可能低。height:1px.table_sidebar
  3. 将表格包含在所需高度的DIV中。
  4. 在TD中添加具有明确定义的上下边距的P元素（ TD中P的默认 CSS显然没有边距）。
<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方法不太依赖于获得恰到好处的大小。

于 2020-09-10T14:46:59.113 回答