¿Cómo hago que un div flotante se expanda dinámicamente para ocupar el máximo espacio?

Tengo 3 objetos flotados a la izquierda, el de la izquierda cambiará de tamaño todo el tiempo. El derecho siempre se fijará en tamaño. El centro quiero llenar el espacio entre los dos divs externos. Ahora mismo eso no está funcionando. Si configuro el ancho del centro div al 100%, se vuelve demasiado grande.¿Cómo hago que un div flotante se expanda dinámicamente para ocupar el máximo espacio?

No estoy seguro de cómo se debe manejar esto.

edición: ejemplo de código

<div style="width:1000px"> 
    <div style="float:left;">1</div> 
    <div style="float:left;">Lots of text in here that can be any size....</div> 
    <div style="float:left; width:100px;">Date/Time</div> 
</div>

La primera div es dinámico en tamaño. Si el número es 10, va a ocupar más espacio que el número 1. El segundo div también será dinámico, quiero que ocupe el espacio que no ocupe el primer y el tercer div.

Fuente

2011-05-30 John Baker

Código de muestra, por favor. – Niklas

HTML

<div style="width:1000px"> 
    <div id="left">1</div> 
    <div id="right">Date/Time</div> 
    <div id="center">Lots of text in here that can be any size....</div> 
</div>

CSS

#left { 
    float: left; 
    width: 20%; 
} 

#center { 
    margin-left: 20%; 
    margin-right: 100px; 
} 

#right { 
    float: right; 
    width: 100px; 
}

Ver fiddle.

Fuente

2011-05-30 18:54:07 melhosseiny

No parece que el margen izquierdo realmente funcione en ese caso, al menos el violín al que me vinculó no tiene un margen –

¿Cómo no funciona? – melhosseiny

Si funcionara, habría un espacio entre los dos colores, ¿verdad? En el violín que enviaste veo cada elemento uno al lado del otro como si estuviera en una mesa. –

Prueba esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>How do I make a floating div dynamically expand to take up maximum space?</title> 
    <style type="text/css"> 
    #left { 
     float:left; 
     border:1px solid red; 
    } 
    #right { 
     float:right; 
     border:1px solid green; 
     width:100px; 
    } 
    #center { 
     overflow-x:hidden; 
     border:1px solid blue; 
    } 
    </style> 
</head> 
<body> 

<h1>How do I make a floating div dynamically expand to take up maximum space?</h1> 

    <div id="left"> 
    Un-fixed width left, whose content may change. 
    </div> 
    <div id="right"> 
    Fixed WIdth Right column which shouldn't expand. 
    </div> 
    <div id="center"> 
    The center content<br />Which should expand as necessary 
    </div> 

</body> 
</html>

Fuente

2011-05-30 18:50:14

Probablemente descubrió esto hace mucho tiempo, pero para el próximo tipo, puede hacerlo ahora con CSS3 flexbox. (W3c's newest specification, Mozilla documentation, css-tricks)

HTML

<div class="flex-container"> 
    <div>1</div> 
    <div class="expandable">Lots of text in here</div> 
    <div style="float:left; width:100px;">Date/Time</div> 
</div>

CSS

.flex-container { 
    display: flex; 
    width: 1000px; 
    border: 1px solid black; 
} 
.expandable { 
    flex: 100 100; 
    text-align: center; 
}

Aquí es el jsfiddle.

Fuente

2015-04-23 12:16:49 slushy

¿Cómo hago que un div flotante se expanda dinámicamente para ocupar el máximo espacio?

Respuesta

Cuestiones relacionadas