Título: 2 columnas horizontales responsive Publicado por: WIитX en 26 Junio 2016, 21:52 pm Hola, estoy intentando hacer 2 columnas responsive pero seque no hay manera e probado creando una table y demás a ver si podes echarme una mano
Código
Código
Este es el código T.T a ver si podes ayudarme | HEADER | | columna 1 | | Columna 2| Título: Re: 2 columnas horizontales responsive Publicado por: xiruko en 26 Junio 2016, 22:22 pm Hola, estás usando Bootstrap? Lo digo por lo de table table-striped...
Si es así, para hacer dos columnas que de tablet para abajo se vea una debajo de otra, simplemente haz esto: Código Si no usas Bootstrap, deberás usar media queries para conseguir un comportamiento responsive. Siguiendo con el HTML que he puesto arriba, sería algo así: Código
Saludos! Título: Re: 2 columnas horizontales responsive Publicado por: WIитX en 27 Junio 2016, 23:06 pm Hola, muchas gracias por su pronta respuesta!
Sí, uso boostrap e probado el código que me has pasado pero las columnas son 50% y 50% sin embargo yo quiero que la columna izquierda sea más ancha que la derecha, pero al mover los % la derecha se me baja abajo Un saludo y gracias :S Título: Re: 2 columnas horizontales responsive Publicado por: xiruko en 28 Junio 2016, 11:01 am Hola,
Antes de nada deberías echarle un vistazo a la documentación oficial de Bootstrap... http://getbootstrap.com/css/#grid (http://getbootstrap.com/css/#grid) Respecto a tu duda, para hacer la izquierda más ancha, deberás aumentar el valor de su clase sm a la vez que reduces el de la derecha. Recuerda que en una fila, las columnas siempre deben sumar 12. Por ejemplo: Código Saludos! Título: Re: 2 columnas horizontales responsive Publicado por: gAb1 en 29 Junio 2016, 02:24 am Hola, no te recomiendo usar el float, es muy sucio y hay que estar usando hacks, y usarlo en cada elemento...
Yo uso flexbox y hace exactamente lo mismo, solo que no necesitas ir limpiando nada ni poner divs extras, simplemente se pone display inline-flex en el div padre (o flex si necesitas tener un absolute dentro) y todos los elementos que tengas dentro se alinean horizontalmente, dependiendo del ancho que tengan. Y para que no se amontonen usas flex-wrap: wrap y se reparten por filas (no más del 100% del ancho del padre en cada fila). Respecto a bootstrap, no te recomiendo usar un framework entero, ya que seguramente no necesitarás ni la mitad de todo lo que tiene, lo único útil que les veo son el sistema de columnas, que simplemente son clases con un width %. Con eso y flexbox yo no necesito (de momento) usar frameworks. Ahora, si solo estás haciendo pruebas y aprendiendo no hay ningún problema, me refiero para producción. O a menos que estés en un proyecto muy grande y la web va tener mil cosas y vás a usar practicamente todo lo que ofrece dicho framework, entonces si que vale la pena usarlo. Edito: Si no me equivoco esto es lo que estabas buscando no? https://jsfiddle.net/y5x3jyc9/2/ Ni un solo float ;D Código
Código
Ahora sobre el tema del scroll, es algo muy facil, puedes ponerlo donde quieras, si quieres que se muestre el header siempre (sin tener que usar javascript) puedes ocultar el overflow en el body y mostrarlo solo en el main, de esta manera solo hace scroll este elemento: https://jsfiddle.net/y5x3jyc9/3/ Código
O dejarlo normal: https://jsfiddle.net/y5x3jyc9/4/ A tu gusto ;) |