CSS - elemento flotante de ancho automático (flotante expandible)

Tengo dos columnas flotantes una al lado de la otra. El usuario puede ocultar/colapsar una de esas columnas. En ese caso, quiero que la otra columna se expanda para adaptarse a todo el contenedor.CSS - elemento flotante de ancho automático (flotante expandible)

¿Es esto posible con CSS?

En resumen, ¿es posible hacer un flotador para expandirse al tamaño de su contenedor? Incluso si el elemento está flotante, si tiene ancho: auto debería expandirse. Al menos así creo que debería funcionar.

Fuente

2010-08-11 brpaz

puede darnos una muestra de código, ¿cómo ocultas/colapsas la columna? – Sotiris

Es poco probable que esto sea posible en CSS puro (lo que hace que las columnas reaccionen a los eventos del usuario), pero ciertamente es factible con js/jQuery. –

¿Ha pensado en usar una biblioteca de JavaScript como jQuery? Podría cambiar el estilo CSS de esas columnas sobre la marcha sin romper a sudar. [Editar ... notó que se agregó otro comentario similar después de actualizar la página - Ah, buenas mentes ...; p] –

-3

Si su columna izquierda tiene un tamaño implícito, digamos 250px y su columna derecha SÓLO está flotante sin un tamaño establecido, entonces debe llenar el contenedor cuando la columna de la izquierda se contrae. Código sería el siguiente:

#leftcol{ 
width:250px; 
float:left; 
clear:none; 
} 

#rightcol{ 
float:left; 
overflow:hidden; 
width:auto; /* This may or may not work */ 
}

Fuente

2010-08-11 13:56:07 SimonDowdles

Tengo que votar esto porque no funciona. Vea este ejemplo: http://jsfiddle.net/4jtnY/2/ –

Nup, no creo que la respuesta aceptada realmente funciona. Sólo estaba intentando lo mismo, y esta es la solución ...

.left { 
    float: left; 
} 
.right { 
    overflow: hidden; 
    /* don't float this one */ 
}

jugar con el código aquí: http://jsfiddle.net/simoneast/qPHgR/2/

Fuente

2012-04-26 12:16:25

Esta es una buena solución en general. Pero lo que no me gusta es cómo se desborda el contenedor ".right", colocando las barras de desplazamiento en el contenedor en lugar de la ventana. Es desafortunado. –

Lo siento Joseph pero 'overflow: hidden' nunca debe poner barras de desplazamiento en el elemento. Y se expandirá automáticamente en ancho y alto, por lo que debería mostrar todo su contenido a menos que sea más grande que la columna misma (por ejemplo, una imagen o un elemento de tamaño fijo). ¿Estás seguro de que no estás poniendo CSS adicional de lo que está aquí? –

Simon, tienes razón. Si '.right' o cualquier cosa dentro de' .right' quiere ser al menos un cierto ancho, entonces 'overflow: hidden' puede cortar el contenido si la ventana es demasiado pequeña. En mi prueba, agregué 'overflow-x: auto;' que hace que las barras de desplazamiento aparezcan en ese caso. –

conjunto overflow:auto; height:auto; para el elemento floatet :)

Fuente

2013-02-05 13:20:30

CSS - elemento flotante de ancho automático (flotante expandible)

Respuesta

Cuestiones relacionadas