¿Cómo pueden los múltiples divs (de tamaño dinámico) compartir un ancho del 100%?

Question

Tengo siguiente estructura html:

<div style="width:100%"> 
    <div style="float:left; width:70%"><input /></div> 
    <div style="float:left">element with unknown width</div> 
    <div style="float:left; width=30%"><input /></div> 
    <div style="clear:both" /> 
</div> 

Lo que me gustaría lograr es la siguiente:

• (Requisito) El div externa debe utilizar el 100% de la anchura de la pantalla
• (Requisito) Los tres divisores internos deberían compartir estos 100% entre ellos
• (Requisito) El segundo div, entre los otros dos, ocupa una cantidad desconocida de espacio
• Los dos campos de entrada deben usar todo el espacio restante, pero el primero recibirá el 70% del resto, mientras que el tercero obtiene el 30%

¿Cómo se puede hacer algo como esto?

Answer 1

@RoToRa: Gracias por la propina. anchura

Distribuir 70:30

<div style="display:table; width:100%"> 
    <div style="display:table-cell; width:70%"> 
    <input style="width:100%"/> 
    </div> 
    <div style="display:table-cell; width:1px"> 
    <a style="white-space:nowrap">Some Text</a> 
    </div> 
    <div style="display:table-cell; width=30%"> 
    <input style="width:100%;" /> 
    </div> 
</div> 

Solution, donde el primer campo de entrada toma todo el exceso de espacio, y el campo de entrada final tiene fijo:: supongo que esto es la solución final de este problema

<div style="display:table; width:100%"> 
    <div style="display:table-cell; width:100%"> 
    <input style="width:100%"/> 
    </div> 
    <div style="display:table-cell; width:1px"> 
    <a style="white-space:nowrap">Some Text</a> 
    </div> 
    <div style="display:table-cell; width=100px"> 
    <input style="width:100px;" /> 
    </div> 
</div> 

Answer 2

¿Qué está determinando el ancho del div central? Como probará mi puntuación de representante, no soy un desarrollador con mucha experiencia, pero creo que este es el meollo de su problema. Si literalmente no importa cuál es el ancho de la columna central, entonces hay una proporción div de 70%, 0%, 30% y 7%, 90%, 3%. son respuestas matemáticamente equivlent a su problema. Entonces su solución podría ser tan simple como:

<div style="width:100%"> 
    <div style="float:left; width:7%">Some elements here.</div> 
    <div style="float:left; width:90%">Some more elements here.</div> 
    <div style="float:left; width:3%">Even more elements here.</div> 
</div> 

Answer 3

Se supone que las tablas son malas, pero parecen resolver el problema. Todavía estoy interesado en una solución sin javascript o tablas, si alguien puede encontrar uno ...

Distribute espacio restante con una relación de 70:30

<table width="100%"> 
    <tr> 
    <td style="width:70%"> 
     <input style="width:100%"/> 
    </td> 
    <td> 
     <a>Some Text</a> 
    </td> 
    <td style="width:30%"> 
     <input style="width:100%"/> 
    </td> 
    </tr> 
</table> 

campo Primera entrada utiliza todo el espacio restante, mientras que la última caja tiene un ancho fijo:

<table width="100%"> 
    <tr> 
    <td style="width:100%"> 
     <input style="width:100%"/> 
    </td> 
    <td> 
     <a>Some Text</a> 
    </td> 
    <td style="width:100px"> 
     <input style="width:100px"/> 
    </td> 
    </tr> 
</table>