Question

似乎微不足道，但我似乎正在努力解决这个问题。我有一个容器div和内容。页面需要响应所以我自然而然地在所有内容上使用最大宽度（以px为单位）。

我为div，h2和p标签添加了宽度：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中，上面的代码有效。

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。这是一个限制＆＃34;。

width属性是指如何稳定元素的确切宽度。

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

最大宽度px宽度100％

2 个答案: