Question

只使用CSS中的max-width属性练习。在下面的代码中，即使在设置.topimage之后，内部div max-width: 960px;max-height: 200px;（红色的那个）也根本没有出现？可能是什么原因？请注意，我使用的是最大宽度/高度，因为我希望内部div根据浏览器窗口的大小进行缩放。

html,body {
	margin: 0px;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	background-color: rgba(173,192,241,1);
    }

.wrapper {
	height: 800px;
	max-width: 960px;
	margin-left: auto;
	left: 0px;
	top: 0px;
	margin-right: auto;
	position: relative;
}



.topimage {
	max-width: 960px;
	max-height: 200px;
	background-color: rgba(255,0,0,1);
}

<div class="wrapper">
<div class="topimage">
</div>
</div>

Answer 1

你需要宽度和高度。

最大宽度不会传播你的div。

使用宽度：100％，最大宽度：960px;

并且对于身高，您需要在内部放置内容或放置高度：例如100px。

Answer 2

默认情况下，空DIV的宽度设置为100％，高度设置为0px，因此高度不受最大值的影响，因此您无法看到红色框。

一个简单的修复只是添加100％作为默认值，然后max-width / height可以发挥作用。 （你没有需要来指定宽度，因为默认值通常是100％，但最好说明你自己的默认值。）

html,body {
	margin: 0px;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	background-color: rgba(173,192,241,1);
    }

.wrapper {
	height: 800px;
	max-width: 960px;
	margin-left: auto;
	left: 0px;
	top: 0px;
	margin-right: auto;
	position: relative;
}



.topimage {
	width:100%; /* ADDED */
	height:100%; /* ADDED */
	max-width: 960px;
	max-height: 200px;
	background-color: rgba(255,0,0,1);
}

<div class="wrapper">
<div class="topimage">
</div>
</div>

内部div的最大宽度不起作用

2 个答案: