Свойство CSS min-width не работает
у меня есть следующая проблема:
У меня есть div, содержащий другие элементы, и я пытаюсь сделать его ширину зависимой от содержимого. Я также ограничиваю максимальную ширину этого div. Я использую min-width
и max-width
в CSS, но, кажется,min-width
не работает. Ширина div всегда является max-width
значение, независимо от того, что содержание.
пример:
Я хотел бы иметь белый div (то есть основной div, я говорил о) строго вокруг формы то есть в нем, без пустых мест слева и справа. Я дал форму style 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;
}
1 ответов
по умолчанию блочный элемент будет расширяться, чтобы заполнить как можно больше ширины. Таким образом, его ширина в основном "100%" (вроде), и вы говорите максимум 1000px, поэтому она расширяется до максимума 1000px. Минимальная ширина достигается (это не менее 500px). Попробуйте установить display: inline-block
на элементе и посмотреть, поможет ли это вам. Это должно сделать его только расширяться, насколько это содержание, все еще обращая внимание на минимальную и максимальную ширину. Возможно, вам придется добавить breaker <br />
после всего остального вашего контента адаптировать его в узде.