¿Por qué no funcionan el ancho mínimo y el ancho máximo como esperaba?

Estoy tratando de ajustar un diseño de página CSS usando min-width y max-width. Para simplificar el problema, hice esta página de prueba. Lo estoy probando en las últimas versiones de Firefox y Chrome con los mismos resultados.¿Por qué no funcionan el ancho mínimo y el ancho máximo como esperaba?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Testing min-width and max-width</title> 
    <style type="text/css"> 
     div{float: left; max-width: 400px; min-width: 200px;} 
     div.a{background: orange;} 
     div.b{background: gray;} 
    </style> 
    </head> 
    <body> 
    <div class="a"> 
     (Giant block of filler text here) 
    </div> 
    <div class="b"> 
     (Giant block of filler text here) 
    </div> 
    </body> 
</html>

Esto es lo que esperaba suceda:

Con el navegador maximizado, los divs se sientan de lado a lado, cada uno de 400 píxeles de ancho: su anchura máxima
reducir la ventana del navegador, y ambos se reducen a 200px: su ancho mínimo
Reducir aún más el navegador no tiene ningún efecto en ellos

Esto es lo realidad sucede, comenzando en el paso 2:

reducir la ventana del navegador, y tan pronto como ellos no pueden sentarse de lado a lado en su ancho máximo, el segundo div cae por debajo del
Además encoger el navegador hace a conseguir más y más estrecho, tan pequeño como puedo hacer que la ventana

Así que aquí son de mis preguntas:

¿Qué significa max-width si el elemento saltará antes en el diseño que irá por debajo de su ancho máximo?
¿Qué quiere decir min-width si el elemento se ampliará más felizmente si la ventana del navegador sigue disminuyendo?
¿Hay alguna manera de lograr lo que quiero: tener estos elementos sentados uno al lado del otro, felizmente encogiéndose hasta que alcanzan 200px cada uno, y solo entonces ajustar el diseño para que el segundo se caiga?

Y, por supuesto ...

¿Qué estoy haciendo mal?

Fuente

2010-05-14 Nathan Long

La razón por la que están "cayendo" es debido al tamaño cambiante de su elemento principal (en este caso body). Ponga un envoltorio div alrededor de ellos con un ancho de 400 píxeles o más y puede mantenerlos sentados uno al lado del otro.

Fuente

2010-05-14 20:53:14 Amber

Envolvió un div alrededor de ambos y le dio una regla: 'ancho: 900px;'. Ahora ellos nunca se sientan uno al lado del otro. Intenté agregar un flotador izquierdo en caso de que se estuviera colapsando. Ningún cambio. –

Creo (y esto es solo por mi propia experiencia personal), que el ancho máximo se aplica al contenido dentro del div. Entonces, si hubiera solo 1 palabra dentro del div, sería de 200 px de ancho, pero si hubiera 300 palabras en un div, el ancho sería de 400 px de ancho.

Creo que hay una manera de hacer lo que quiere hacer. Este artículo podría relacionarse con ella:

http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-different-layouts-for-different-widths/

Buena suerte.

Fuente

2010-05-14 20:56:39 codedude

Para contestar al menos un poco:

min-width realmente se trata de que el explorador debe mostrar una barra de desplazamiento horizontal para la página.

Mientras que los flotadores que experimentan realmente sólo funcionan bien cuando tienen un conjunto width, por lo que haría uso de un padre con un div min y ancho máximo establecido y añadir width: 50% a los divs niño. Esto resuelve todos tus problemas aparte del diseño de cambio de divs. Para esto, probablemente me referiría a javascript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Testing min-width and max-width</title> 
    <style type="text/css"> 
     div.cont {max-width: 700px; min-width: 400px;} 
     div.a, div.b {float: left; width: 50%; } 
     div.a{background: orange;} 
     div.b{background: gray;} 
    </style> 
    </head> 
    <body> 
     <div class="cont"> 
    <div class="a"> 
     Morbi malesuada nulla nec purus convallis consequat... 
    </div> 
    <div class="b"> 
     Vivamus id mollis quam. Morbi ac commodo nulla... 
    </div> 
    </div> 
    </body> 
</html>

Fuente

2010-05-14 21:00:31

¿Por qué no funcionan el ancho mínimo y el ancho máximo como esperaba?

Respuesta

Cuestiones relacionadas