最大宽度 px 宽度 100%答案

【问题标题】：Max-width px width 100%最大宽度 px 宽度 100%
【发布时间】：2015-06-26 14:54:37
【问题描述】：

似乎微不足道，但我似乎在为此苦苦挣扎。我有一个容器 div 和内容。页面需要响应，所以我自然而然地在所有内容上使用最大宽度（以 px 为单位）。

我在 div、h2 和 p 标签中添加了 width: 100%，但宽度没有扩展到最大宽度。如何在不将宽度显式设置为此固定值的情况下让 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 中导致问题，上面的代码有效。

【问题讨论】：

描述错误图像或提供输出示例。

标签： html css

【解决方案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/

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

【讨论】：

宽度后面的分号不影响它是否是最后一个属性.... OP的代码正在运行

【解决方案2】：

max-width 属性用于设置元素的最大宽度。这可以防止 width 属性的值变得大于 max-width。这是一个“限制”。

width 属性用于确定元素的确切宽度。

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

【讨论】：