2012-06-08 25 views
5

Tengo dos divs bastante estrechos (ancho: 400 px) que deben apilarse verticalmente si hay suficiente espacio vertical en la ventana del navegador. Si la altura del navegador es demasiado pequeña y hay espacio suficiente a la derecha, la "div inferior" debería flotar a la derecha de la div superior.CSS: "float: bottom" si hay espacio vertical disponible. "float: left" de lo contrario

En cierto sentido, estoy pidiendo lo contrario a "flotar: izquierda". float: alineado a la izquierda divs horizontalmente si hay suficiente espacio horizontal en la ventana del navegador y solo flotante divs debajo de los demás si solo hay espacio disponible debajo de ellos.

¡Gracias por cualquier sugerencia!

+1

¿Qué pasa si hay espacio en la derecha y también espacio en la parte inferior? – Jashwant

+2

No creo que haya una manera de hacer esto solo con CSS. Creo que probablemente deba involucrar algo de Javascript. Haga que la prueba JS para la altura de la ventana se haga de nuevo y luego calcule cuánto espacio hay. Luego aplique un estilo apropiadamente a cada div ('float: left;' y/o 'clear: both;') –

+0

Jashwant: siempre se prefiere colocar el div debajo del otro. Entonces, solo en el caso de que haya espacio a la derecha pero no en la parte inferior, div2 debería ir a la derecha de div1. –

Respuesta

8

Dependiendo del nivel de soporte de los navegadores que necesita, una consulta de medios simple puede resolver su problema:

<!doctype html> 
<html> 
    <head> 
     <style> 
      /* SET THE DEFAULT RULES FOR SHORT SCREENS */ 
      .bottom-floaty { 
       height:200px; 
       width: 400px; 
       margin: 15px; padding: 10px; 
       outline: 1px dashed #aaf; 
       } 
      /* HERE FOLLOWS THE MAGICAL MEDIA QUERY FOR TALL SCREENS */ 
      @media all and (max-height: 500px) { 
       .bottom-floaty { float:left; } 
      } 
     </style> 
    </head> 
    <body> 
     <div class="bottom-floaty"> 
      I'm a sometimes floaty div 
     </div> 
     <div class="bottom-floaty"> 
      I'm also a sometimes floaty div 
     </div> 
    </body> 
</html> 

Aquí es el efecto que veo con lo siguiente: In a tall window In a short window

Las consultas de medios de CSS3 le permiten establecer las reglas css que desee en función del alto de la ventana gráfica. The w3c has lots of information about media queries.

Un fragmento relevante con respecto a la altura de la ventana gráfica:

La característica de ‘altura’ medios de comunicación describe la altura de la zona de visualización específica del dispositivo de salida. Para medios continuos, esta es la altura de la ventana gráfica, incluido el tamaño de una barra de desplazamiento representada (si corresponde). Para medios paginados, este es el alto del cuadro de página.

Un especificado no puede ser negativo.

A veces encuentro Mozilla Developer Network un poco más accesible, pero en este caso proporcionan basically the same information.

¿Necesita admitir navegadores antiguos que no pueden procesar consultas de medios? Sería bastante sencillo escribir un javascript polyfill que tenga el mismo efecto, especialmente si se usa una biblioteca como jQuery.

Editar

que revisó mi ejemplo de código para aproximarse más a su problema. Has comentado:

Jashwant: siempre se prefiere colocar el div debajo del otro. Entonces, solo en el caso de que haya espacio a la derecha pero no en la parte inferior, div2 debería ir a la derecha de div1. - Jonas

Y también establezco los anchos a 400px como en su ejemplo.

Ahora solo flota a la izquierda si la pantalla es demasiado corta para que sean verticales y hay suficiente espacio a la derecha para ambos. De lo contrario, siempre es vertical.

+0

¡Muchas gracias, Phil! Luego hubo una hermosa solución después de todo. Resumiría esta respuesta tres veces si pudiera. Muy completo y al punto. –

3

si no desea utilizar la propiedad float:left;, cada DIV pasa a la nueva línea. entonces usa la propiedad flotar a la izquierda. cuando se quiere nueva línea sólo tiene que utilizar clear:both;

+2

que es una buena idea. –

+2

Gracias por su sugerencia, Sara. Sin embargo, no resuelve el problema de querer que div2 permanezca en la parte inferior como predeterminado, pero flotando hacia la derecha si no hay espacio en la parte inferior Y hay espacio a la derecha. Parece que uno debería basarse en su proposición con la sugerencia de javascript de David (ver comentario en la pregunta). –