Disculpe el título de basura. No podría pensar cómo describir mejor esta.ancho del conjunto CSS para rellenar% del área restante

Estoy tratando de implementar el gadget para miembros de Google Friend Connect en mi sitio (ingresé al plan y quiero ponerlo sin un rediseño importante, al menos para probarlo).

Mi problema es el siguiente:

I tienen un div contenedor que tiene una anchura de 90% de la página principal (cuerpo). Dentro de esto estoy flotando un div a la derecha y estableciendo su ancho a 300px y colocando el gadget de google dentro de él. Lo que me gustaría es poder tener un div llenar el 95% del espacio restante a la izquierda de la div gadget de google.

No sé si es posible mezclar px y% con divs y anchuras.

Espero que esto tenga sentido.

Gracias

Fuente

2008-12-05 Jon

Relacionados http://stackoverflow.com/questions/4873832/make-a-div-fill-up-the-remaining-width –

Es. Está buscando un diseño semi-fluido. La búsqueda fue originalmente el holy grail of CSS implementation ... Pero como se puede ver en ese enlace (están haciendo 3 columnas, 2 fijas pero es fácil de modificar), es un problema resuelto hace tiempo =)

Fuente

2008-12-05 09:34:41 Oli

Parece perfecto. Gracias. Voy a tener un violín con esto durante el fin de semana. – Jon

+44

Son artículos como este los que reafirman mi temor a que CSS esté lejos, lejos de ser una buena herramienta para el diseño. – s4y

+11

@Sidnicious Como alguien que hace esto [convertir diseños en sitios web] como mi trabajo de pan y mantequilla, puedo decir que es mucho mejor que cualquier otra cosa que haya sido antes o haya sido sugerida desde entonces. No es perfecto y necesitas saber cómo funciona ... Pero una vez que lo haces, es simple. – Oli

Hice una rápida experimentar también después de ver una serie de posibles soluciones en todo el lugar. Lo que intentaba hacer era tener una mezcla de filas y columnas fijas y fluidas.

Esto es lo que terminó con:

http://jsbin.com/hapelawake

Fuente

2015-01-05 04:37:59

-2

lo necesario para crear un algoritmo usando jQuery o JS que comprueba el espacio restante y establece el ancho del elemento "resto" de forma dinámica, por una construcción receptiva. Si la compilación no responde, puede probar y establecer el ancho del elemento haciendo cálculos matemáticos simples.

Hemos tenido problemas similares al construir un sistema de medios basado en una red sensible a los líquidos.

Fuente

2015-05-09 18:31:30 BasisInteractive

solución Flexbox

.main { 
 
    display: flex; 
 
    width: 90%; 
 
} 
 
.col1 { 
 
    flex-grow: 1; 
 
} 
 
.col2 { 
 
    width: 300px; 
 
    margin-left: 5%; 
 
}

<div class="main"> 
 
    <div class="col1" style="background: #eee;">Left column</div> 
 
    <div class="col2" style="background: #ccc;">Right column</div> 
 
</div>

Nota: Añadir prefijos de proveedores flex si lo requiere el supported browsers.

Fuente

2017-07-26 20:12:29

ancho del conjunto CSS para rellenar% del área restante

Respuesta

solución Flexbox

Cuestiones relacionadas