最大宽度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