CSS - 固定寬度佈局

Question

我正在寫一個固定的寬度設計的代碼，我有一個非常簡單的問題，我似乎無法得到解決：

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

如果比方說，瀏覽器窗口寬度是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>