html - maximo - La propiedad de ancho mínimo de CSS no funciona
propiedades de div en css (1)
De forma predeterminada, un elemento de nivel de bloque se expandirá para rellenar la mayor anchura posible. Entonces, su ancho es básicamente "100%" (más o menos) y estás diciendo un máximo de 1000px, por lo que se está expandiendo al máximo de 1000px. Se está logrando el ancho mínimo (al menos 500px). Intente configurar display: inline-block en el elemento y vea si eso le ayuda a salir. Esto debería hacer que solo se expanda en la medida de su contenido, al mismo tiempo que se presta atención a los anchos mínimo y máximo. Es posible que tenga que agregar un interruptor <br /> después para que el resto de su contenido se adapte a la línea.
Tengo el siguiente problema:
Tengo div que contiene otros elementos e intento que su ancho dependa del contenido. También restrinjo el ancho máximo de este div. Utilizo min-width y max-width en CSS, pero parece que min-width no funciona. El ancho de div es siempre el valor de max-width máximo, sin importar cuál sea el contenido.
Ejemplo:
Me gustaría tener el div blanco (que es el div principal, del que estaba hablando) estrictamente alrededor de la forma que hay en él, sin espacios vacíos en el lado izquierdo y derecho. Le di al estilo de formulario max-width:500px para mostrar que incluso si el contenido es pequeño, la división principal permanece igual.
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;
}
