CSS - 固定宽度布局[重复]答案

【问题标题】：CSS - Fixed width layout [duplicate]CSS - 固定宽度布局[重复]
【发布时间】：2015-11-04 14:10:13
【问题描述】：

我正在编写固定宽度设计的代码，但我遇到了一个似乎无法解决的非常简单的问题：

<div style="background-color:black">
  <div style="width:900px;margin:0 auto">
    content
  </div>
</div>

如果浏览器窗口的宽度是 500px，那么黑色背景只需要 500px 宽度，而内部 div 保持在 900px。为什么外部 div 不占用 900px 来容纳内部 div？

【问题讨论】：

【解决方案1】：

如果没有以任何方式指定，block 元素只会使用视口的整个宽度。将第一个 div 用作 inline-block 元素，它将起作用：

<div style="background-color:black; display: inline-block;">
  <div style="width:900px;margin:0 auto">
    content
  </div>
</div>

【讨论】：