最大寬度px寬度100％

Question

似乎微不足道，但我似乎為此感到掙扎。 我有一個容器div和內容。 頁面需要響應，所以自然地，我在所有內容上都使用了最大寬度（以像素為單位）。

我為div，h2和p標簽添加了width：100％，但是寬度沒有擴展到max-width。 如何在不將寬度顯式設置為此固定值的情況下使div擴展到最大大小？

CSS和HTML

 .container {max-width:1200px; width:100%;} .container h2 {max-width:400px; width:100%;} .container p {max-width:900px; width:100%;} 

 <div class="container"> <h2>Dynamically populated using PHP</h2> <p>Dynamically populated using PHP</p> </div> 

編輯：這是CSS埋在其他div中引起的，上面的代碼有效。

Answer 1

您忘記了寬度規則后的分號。

<div class="container">
    <h2>Dynamically populated using PHP</h2>
    <p>Dynamically populated using PHP</p>
</div>

.container {max-width:1200px; width:100%; background-color: red;}
.container h2 {max-width:400px; width:100%; background-color: blue;}
.container p {max-width:900px; width:100%; background-color: green;}

http://jsfiddle.net/kr1b92mu/

我添加了背景色以表明它正在工作:)。

Answer 2

max-width屬性用於設置元素的最大寬度。 這樣可以防止width屬性的值變得大於max-width。 這是一個“極限”。

width屬性是一種如何穩定元素的確切寬度的屬性。

http://www.w3schools.com/cssref/pr_dim_max-width.asp