Question

我有这样的HTML：

<div class="outer">
    <div class="inner"></div>
</div>

这样的CSS：

.outer {
    background-color: red;
}

.inner {
    width: 1300px;
    margin: 0 auto;
    height: 300px;
    border: 3px solid black;
}

http://jsfiddle.net/u2yzyvu3/

问题是外部div被视口剪切的背景。有谁知道它为什么这样工作？

我找到了解决方案：设置 display：table;和宽度：100％; 到外部div。但它看起来像一个黑客。我的布局出了什么问题？

Answer 1

.outer的宽度计算方式与此[source]：

相同

以下约束必须包含在另一个的使用值中属性：
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block
如果width设置为auto，则任何其他auto值都会变为0并且 width遵循由此产生的平等。

然后，.outer的宽度将是containing block的宽度。

.inner的宽度为1300px，可能会超过.outer的宽度，从而溢出。但是，.outer的背景仅适用于.outer，而不适用于其后代。

有不同的方法可以解决这个问题：

将背景添加到.inner

.inner {
    background-color: inherit;
}

.outer {
  background-color: red;
}
.inner {
  width: 1300px;
  margin: 0 auto;
  height: 300px;
  border: 3px solid black;
  background-color: inherit;
}

<div class="outer">
  <div class="inner"></div>
</div>

使用.outer
使display: table包围其内容
```
.outer {
    display: table;
}
```

.outer {
  background-color: red;
  display: table;
}
.inner {
  width: 1300px;
  margin: 0 auto;
  height: 300px;
  border: 3px solid black;
}

<div class="outer">
  <div class="inner"></div>
</div>

使用.outer（或display: inline-block）
使inline-table包围其内容
```
.outer {
    display: inline-block;
}
```
但是，请注意.outer将是内联级别的。如果它被其他内联元素包围，则可能会出现问题。

.outer {
  background-color: red;
  display: inline-block;
}
.inner {
  width: 1300px;
  margin: 0 auto;
  height: 300px;
  border: 3px solid black;
}

<div class="outer">
  <div class="inner"></div>
</div>

使用.outer
使float: left包围其内容
```
.outer {
    float: left;
}
```
记得要清除漂浮物。

.outer {
  background-color: red;
  float: left;
}
.inner {
  width: 1300px;
  margin: 0 auto;
  height: 300px;
  border: 3px solid black;
}

<div class="outer">
  <div class="inner"></div>
</div>
<span>a</span>
<span>a</span>

防止将overflow-x溢出设置为visible以外的任何内容：
```
.outer {
    overflow: auto;
}
```

.outer {
  background-color: red;
  overflow: auto;
}
.inner {
  width: 1300px;
  margin: 0 auto;
  height: 300px;
  border: 3px solid black;
}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 2

如果您正在尝试完成我的想法，请尝试将样式添加到父元素“.outer”，如下所示：http://jsfiddle.net/jimcamut/0pdrbkcp/

.outer {
    background-color: red;
    width: 1300px;
    margin: 0 auto;
    height: 300px;
    border: 3px solid black;
}

.inner {
    /* You can add additional style to the child element */

}

Answer 3

.inner {
    width: auto;
    margin: 0 auto;
    height: 300px;
    border: 3px solid black;
}

Answer 4

.outer { width: fit-content; }，模数供应商前缀。或者，您也可以在:root选择器上设置相同的效果。

块元素的背景由视口剪裁

4 个答案: