CSS 财产 min-width 不要运作

我有以下问题:

我有 div, 包含其他元素,我试图使其成为依赖内容的宽度。 我也限制了这个的最大宽度 div. 我用
min-width


max-width

在 CSS, 但似乎
min-width

不起作用。 宽度 div 总是等于价值
max-width

, 无论这个内容是什么。

例子

:

我想有白色 div /那是主要的 div, 我说的是哪个/ 严格围绕它的形式,位于它,没有左右空的地方。 我给了形式风格
max-width:500px

, 表明即使内容很小,主要是 div 它保持不变。

HTML


<div class="gInnerBox sInnerBoxMain">
<form style="max-width:500px; margin-left: auto; margin-right: auto">
<div id="content">
<!-- CONTENT -->
</div>
</form>
</div>


CSS


.gInnerBox{
position: relative;
background-color: #fff;
opacity: 0.9;
padding: 10px 10px 10px 10px;

box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
-moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
-webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;

border: 1px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

.sInnerBoxMain{
max-width: 1000px;
min-width: 500px;
margin-left: auto;
margin-right: auto;
top: 50px;
}


https://i.stack.imgur.com/noLll.png
/来源:
http://wstaw.org/m/2011/11/25/ttt.png
/
已邀请:

江南孤鹜

赞同来自:

默认情况下,块级元素将展开以填充尽可能多的宽度。 因此,它的宽度主要是 "100%" /有点/, 你说最大值 1000 像素,所以它扩展到最大值 1000 像素。 最小宽度仍然达到 /它不少 500 像素/. 尝试设置
display: inline-block

在元素上,看看它是否有帮助。 它应该强迫它仅扩展,直到其内容仍然会引起最小和最大宽度。 您可能需要添加一个断路器
<br/>

后 rest 您的内容适应了它内置的事实。

要回复问题请先登录注册