Disposición de fluidos con algunas columnas de ancho fijo

Question

Estoy estudiando todo el diseño sensible y encontrando grillas fluidas ideales para eso; el único problema es que parecen romperse cuando trato de dar un ancho fijo a cualquier columna. A medida que encoges la pantalla, las columnas salen del flotador. Hubiera esperado una columna de fluido con un ancho porcentual (o sin ancho) solo para contraer, dejando las columnas de ancho fijo en su lugar. ¿Qué tan fácil es crear una grilla fluida/fija híbrida como esta? He visto una solución con bloque en línea en lugar de bloques flotantes, pero ¿qué tan bueno es eso en todos los navegadores, y es una forma limpia de hacer las cosas?

He aquí un ejemplo del problema: http://jsfiddle.net/andfinally/nJ97q/2/

Gracias! Fred

Answer 1

Establezca el ancho mínimo en la envoltura div al ancho mínimo de las dos columnas fijas + un poco para la columna siguiente. Esto lo hace para que no empuje.

#row { min-width: 400px; } 

La única advertencia es que no es compatible con IE6 y versiones posteriores y puede tener errores en IE7.

--------- ------------- EDITAR

lo que funciona mejor para usted en esta situación, creo que sería un display: table-cell preparar. Esto permitirá que todo se bloquee a las posiciones que está buscando.

.main { 
    padding: 10px; 
    background: #efefef; 
    display: table-cell; //this locks to #sideNav 
} 

#sideNav { 
    display: table-cell; //this wraps the sidebar and middle and locks to main 
    width: 280px; 
    verticle-align: top; 
} 

.middle { 
    display: table-cell; //this locks with .sidebar 
    width: 140px; 
    padding: 10px;  
    background: #bbb; 
} 

.sidebar { 
    display: table-cell; //this locks with .middle 
    width: 100px; 
    padding: 10px;  
    background: #555; 
} 

http://jsfiddle.net/nJ97q/73/

Answer 2

Creo que la solución a continuación probablemente pueda ayudarlo.

Dado que está dando el ancho de div "row" en porcentaje, su redimensionamiento sí mismo cada vez que encoge la ventana. De ser posible, proporciónele un ancho en píxeles, si no puede utilizar el ancho mínimo para que no se vuelva a ajustar por debajo del ancho mínimo y, por lo tanto, su panel permanecerá intacto.

Para que sea suave: Puede agregar javascript para hacerlo sin problemas. Use window.onresize event para llamar a una función que incluye código para hacer que "row" cambie de tamaño lentamente utilizando la función temporizada que aumenta el ancho de la "fila" en 10 píxeles más o menos cada 10 milisegundos hasta la longitud máxima, en este caso la ventana se alcanza la longitud. Pero puede hacer esto de manera efectiva si establece el ancho en píxeles, o si no, se producirá un desagradable efecto de alejamiento.

Espero que ayude, Ashwin

Answer 3

No hay manera limpia de hacer esto. Pero, ¿quién necesita limpiar?

No recomendaría mezclar anchuras fijas y fluidas, pero si es así, es posible que necesite consultas sobre medios (hay muchos rellenos disponibles para IE). Luego puede verificar si el contenedor es más pequeño que X, en cuyo caso reorganizará el diseño (1/3 para todas las columnas o simplemente todo vertical, etc.).

El ejemplo es un poco extraño. ¿Qué hay en todo el espacio en blanco en el medio? ¿Cuál es el contenido?

PS. No use min-width. Eso invalida toda la capacidad de respuesta.

Answer 4

tuve un problema similar en el que se necesita para tener un ancho fijo columna izquierda (estructura de menús), sino que tenga la columna de la derecha cambiar el tamaño responsablemente como el navegador se redujo.

que terminó la implementación de unas pocas preguntas de los medios adicionales (que ya existían para manejar otros casos extremos) y la búsqueda de la anchura porcentaje de la columna de la derecha que trabajó para que la consulta de medios. Esto "salta" ligeramente (solo usé 2 consultas de medios "extra" sobre las computadoras de mano/tableta estándar/de escritorio) pero en todas las resoluciones intermedias no pasará a la siguiente línea. En efecto, está ajustando el contexto en cada consulta de medios antes de que se pueda romper. Más consultas de medios equivaldrían a interrupciones más suaves a medida que el navegador cambia de tamaño.

estoy bien con los saltos porque no estoy construyendo para el caso de uso de una persona cambiar el tamaño de su navegador, sino más bien para asegurarse de que funciona aceptablemente en diferentes dispositivos resolución.

Una advertencia, al calcular las anchuras porcentuales de la columna de la derecha, la anchura de la base usada es la anchura de la consulta de medios que se encuentra, no el ancho original completo. Además, debe usar el ancho mínimo y usar el tamaño que funcione con la resolución más pequeña para cada sección de consulta de medios.

/* 641+ */ 
@media all and (min-width:641px) { 
    .itemDetailLanding { 
     width: 58.81435257410296%; /* 377/641 */ 
    } 
} 
/* 725-768 */ 
@media all and (min-width: 725px) { 
    .itemDetailLanding { 
     width: 63.44827586206897%; /* 460/725 */ 
    } 
} 
/* 769+ */ 
@media all and (min-width: 768px) { 
    .itemDetailLanding { 
     width: 65.625%; /* 504/768 */ 
    } 
} 
/* 860-990 */ 
@media all and (min-width: 860px) { 
    .itemDetailLanding { 
     width: 69.18604651162791%; /* 595/860 */ 
    } 
}  
/* 990+ */ 
@media all and (min-width:990px) { 
    .itemDetailLanding { 
     width: 74.04040404040404%; 
    } 
} 

Answer 5

me pregunto por qué no usar tablas?

igual:

<table class="row"> 
    <tr> 
     <td class="main"> 
     </td> 
     <td class="middle"> 
     </td> 
     <td class="sidebar"> 
     </td> 
    </tr> 
</table> 

Se vuelven muy simple usando diseño de la mesa, no hay JS, misma altura de la columna, una total compatibilidad con cualquier navegador.

Aquí está el ejemplo: http://jsfiddle.net/nJ97q/162/

Sé que todo el mundo dice que el uso de tablas es una mala práctica, pero realmente resuelve todos estos problemas.