html - 如何使div像

好的。我想创建 div 其中:
1. 和文字一样大
2. 但它有最小尺寸和最大尺寸

并告诉我为什么这行 CSS 将我的高度设置为最大高度而不是文本大小或最小高度？

div#me{max-height:40%;min-height:20%;background-color:silver;}

完整代码:

<head>
<meta http-equiv="Content-Language" content="pl" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<html>
<style type="text/css">
html {width:100%;height:100%;}
html div{margin-left:3%;margin-top:1%;width:94%;height:100%;background-color:black;}
div#me{max-height:40%;min-height:20%;background-color:silver;}
</style>

<div>
<div id="me">
TEXT<br/>
TEXT<br/>
</div>



</div>

</html>

最佳答案

给你:

http://jsfiddle.net/bgtJk/2/

您遇到的问题是 html div 的规则被应用于两个 div。

因此，内部 div 被告知具有 height: 100%；不是您想要的，而是问题的原因。

为了修复它，我在外部 div 上指定了一个 id。

现在，#me div 的高度将根据内容而变化 - 从 min-height:20% 到 max-height:40%，以及介于两者之间的任何位置，具体取决于文本高度。如果文字太高，它会溢出，而不是增加div的高度，like this .这似乎不是特别理想的行为。

你确定你不只是想要这样吗:
http://jsfiddle.net/bgtJk/4/

文本将决定 div 的高度。

还是这样？
http://jsfiddle.net/bgtJk/5/

div 将至少有 20% 高，但可以根据需要增长。

关于html - 如何使div像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5371623/