CSS

Question

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

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

如果浏览器 window 宽度为 500px，则黑色背景仅占用 500px 宽度，内部 div 保持在 900px。为什么外部 div 不占用 900px 来容纳内部 div？

Answer 1

如果未以任何方式指定，

A block 元素仅使用视口的整个宽度。使用第一个 div 作为 inline-block 元素，它将起作用：

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

CSS - 固定宽度布局