停止股利從流動佈局

Question

我有我的迴應網站爲中心的div（＃內容），其大小調整到瀏覽器窗口，這樣收縮到內容：

<div id="container"> 
    <div id="content"> 
    <p>Here is some sample text.</p> 
    </div> 
</div> 

#container { 
    width: 100%; 
} 

#content { 
    max-width: 805px; 
} 

它的工作原理，除了當東西在#content裏面沒有佔用足夠的水平空間來將div的寬度推到我設置的最大寬度。例如，而不是805像素，我的一個頁面內容很少的段落標籤之間的內容是740px。

我曾嘗試將width: 100%添加到#content，但這會阻止div的大小調整。

解決此問題的最佳方法是什麼？我是否需要使用媒體查詢？

Answer 1

我找到了答案。我確實需要width: 100%，但我也需要box-sizing: border-box，然後我需要包括我填充的增加寬度爲max-width，像這樣：

#content { 
    box-sizing: border-box; 
    width: 100%; 
    max-width: 885px; 
    padding: 40px; 
}