Foros del Web » Creando para Internet » CSS »

Display:inline-block como solución vertical, ¿pero horizontal?

Estas en el tema de Display:inline-block como solución vertical, ¿pero horizontal? en el foro de CSS en Foros del Web. Hola a todos, tengo un problema con las columnas floats css cuando quiero que sean líquidas : Por ejemplo: pongo un float de 33% de ...
  #1 (permalink)  
Antiguo 01/11/2010, 14:34
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 7 años, 4 meses
Puntos: 8
Display:inline-block como solución vertical, ¿pero horizontal?

Hola a todos,
tengo un problema con las columnas floats css cuando quiero que sean líquidas:
Por ejemplo: pongo un float de 33% de ancho, y dentro de esta columna pongo una imagen de 200px (por ejemplo), cuando reduzco el navegador, la columna float también va reduciendo, y el problema es cuando rebasa el límite que yo quiero: el tamaño de la imagen.
Al final la imagen "sobrepasa" la columna, se sale del borde.

¿Cómo evitar esto?

Cuando una columna float se define su altura, para evitar que elementos sobresalgan por debajo se utiliza display:inline-block. Eso está muy bien para la verticalidad, pero en cuanto a cosas en horizontal, ¿Hay alguna técnica parecida?

- Técnicas que ya sé: min-width (pero no funciona para ie6); aplicar width en porcentaje a las imágenes (pero es una técnica un poco chapuza y laboriosa), tables (es otra filosofía con otros problemas añadidos -y ya no está de moda, jeje-).
...en definitiva, lo que me gustaría és que el mismo float respetase las anchuras de los elementos que contiene (como los tables, tds).

Gracias.
  #2 (permalink)  
Antiguo 01/11/2010, 15:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Display:inline-block como solución vertical, ¿pero horizontal?

Cuando se trabaja con cajas definidas en porcentajes es conveniente fijar un mínimo (evita colapsos a bajas resoluciones) y un máximo (evita "desparrames" en grandes) o bien a las cajas o a un elemento antecesor (en última instancia al body o al html) y que fuercen la aparición del scroll horizontal.
.-min/max-width tiene sus equivalentes para la familia de ie.

Para evitar que un contenido sobresalga de su contenedor se puede/debería utilizar |oveflow:hidden| en combinación de lo anterior.

El añadir un tamaño máximo a las imágenes vía css no es mala praxis si no se pueden redimensionar por otras vías. Y tampoco es tan chapuza ni laborioso de implementar:
.columna img {max-width: 98%;}
por ejemplo.

La propiedad |float| nada tiene que ver con tamaños, desbordes u otras. Es la que es y tiene sus particularidades intrínsecas. Si se desconocen, no se tienen presentes o se obvian suelen presentarse situaciones no deseadas. Pero de eso no tienen culpa las propiedades, sino quienes las usamos sin poner los medios para evitarlas (las situaciones).

Y sí, en su caso la caja flotada si respeta el tamaño indicado (x%) por eso se reduce, el que falla es el resto del código que no ha previsto esa situación y entonces es el agente de usuario el que debe decidir qué hacer.
  #3 (permalink)  
Antiguo 01/11/2010, 16:27
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 7 años, 4 meses
Puntos: 8
Respuesta: Display:inline-block como solución vertical, ¿pero horizontal?

Cita:
Iniciado por kseso? Ver Mensaje
Cuando se trabaja con cajas definidas en porcentajes es conveniente fijar un mínimo (evita colapsos a bajas resoluciones) y un máximo (evita "desparrames" en grandes) o bien a las cajas o a un elemento antecesor (en última instancia al body o al html) y que fuercen la aparición del scroll horizontal.
.-min/max-width tiene sus equivalentes para la familia de ie.

Para evitar que un contenido sobresalga de su contenedor se puede/debería utilizar |oveflow:hidden| en combinación de lo anterior.

El añadir un tamaño máximo a las imágenes vía css no es mala praxis si no se pueden redimensionar por otras vías. Y tampoco es tan chapuza ni laborioso de implementar:
.columna img {max-width: 98%;}
por ejemplo.

La propiedad |float| nada tiene que ver con tamaños, desbordes u otras. Es la que es y tiene sus particularidades intrínsecas. Si se desconocen, no se tienen presentes o se obvian suelen presentarse situaciones no deseadas. Pero de eso no tienen culpa las propiedades, sino quienes las usamos sin poner los medios para evitarlas (las situaciones).

Y sí, en su caso la caja flotada si respeta el tamaño indicado (x%) por eso se reduce, el que falla es el resto del código que no ha previsto esa situación y entonces es el agente de usuario el que debe decidir qué hacer.
Primero de todo, gracias por tu respuesta.
Dices que hay un equivalente de max-width para ie...¡Cuál es!!!
Después, la propiedad overflow-hidden no me acaba de satisfacer: lo que hace es "cortar" lo que sobra.
Y finalmente, en cuanto a imágenes, estaba pensando en varias de diferentes tamaños, con lo que un sólo selector es insuficiente para todas ellas.

Etiquetas: horizontal, vertical
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:04.