Conjunto div a sus hermanos tienen un ancho

Question

Busco una solución CSS a lo siguiente: -

<div style="display:inline;"> 
 
    <div>The content of this div is dynamically created but will always be wider than 
 
       the below div. 
 
    </div> 
 
    <div> Need this div to have the same width as the above div. 
 
    </div> 
 
</div>

La envoltura div tiene una pantalla en línea y funciona como se espera, tanto para el niño divs tienen contenido generado dinámicamente. Necesito que el de abajo tome el ancho del hermano anterior.

Muchas gracias por cualquier sugerencia con anticipación.

Answer 1

No estoy seguro si he entendido lo que está tratando de hacer, pero parece que el establecimiento de un ancho de 100% al último div debería funcionar:

<div style="width:100%;"> 

Por cierto, el estilo de la primera div no está bien definido, usted debe utilizar los dos puntos en lugar de un signo igual en la definición propiedades:

<div style="display:inline;"> 

Answer 2

Indica tu div a display:inline-block lugar, de esta manera el div se expandirá con el contenido dentro de ella.

http://jsfiddle.net/CpKDX/

Answer 3

ACTUALIZACIÓN: Esto funciona conmigo, sólo he probado:

<div style="max-width:980px;border:1px solid red;"> 
    <div style="background:#EEE;float:left;"> 
    <div style="width:auto;border:1px solid blue;float:left;">If you use 100% here, it will fit to the width of the mother div automatically.</div> 
    <div style="border:1px solid green;"> The div will be 100% of the mother div too.</div> 
    </div> 
    <div style="clear:both;"></div> 
</div> 

¿Es esto lo que quieres? Los bordes y el fondo son sólo para mostrar los divs;)

---

Sólo ve así:

Digamos que usted quiere todo el divs sea máximo. 980px (de lo contrario simplemente dejar que fuera o reemplazar con un 100%) ...

<div style="max-width:980px;"> 
    <div style="width:100%;">If you use 100% here, it will fit to the width of the mother div automatically. 
    </div> 
    <div style="width:100%;"> The div will be 100% of the mother div too. 
    </div> 
</div> 

La segunda opción sería, para usar una más div ... o utiliza style="width:auto;" para la dinámica div ...

Answer 4

Los flotadores y las tablas son tan 2000 y tardíos. Con los navegadores de hoy podemos hacer que los dos DIV hermanos se igualen entre sí, independientemente de cuál sea más grande o más pequeño.

He aquí una solución en forma Flexbox de 2016:

.wrapper { 
 
    display: inline-block; 
 
} 
 

 
.parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
/* For visualization */ 
 
.child { 
 
    border: 1px solid #0EA2E8; 
 
    margin: 2px; 
 
    padding: 1px 5px; 
 
}

<div class="wrapper"> 
 
    <div class="parent"> 
 
    <div class="child">Child number one</div> 
 
    <div class="child">Child #2</div> 
 
    </div> 
 
</div>

Answer 5

si estás dispuesto a renunciar a un par de <div> s entonces tengo la solución para usted:

<div style=“display: inline-block;”> 
<table> 
<tr> 
<td>The table automatically makes its siblings the same width</td> 
</tr> 
<tr> 
<td>So this will be as wide</td> 
</tr> 
</table> 
</div> 

Recuerde establecer el div display:inline-block;

Answer 6

Aquí hay otra solución Flexbox que permite que el segundo niño se ajuste para que coincida con el ancho del hermano de altura variable.

.wrapper > div { 
 
    border: 1px solid; 
 
} 
 

 
.child { 
 
    display: flex; 
 
} 
 

 
.child div { 
 
    flex-grow: 1; 
 
    width: 0; 
 
} 
 

 
.wrapper { 
 
    display: inline-block; 
 
}

<div class="wrapper"> 
 
    <div>This div is dynamically sized based on its content</div> 
 
    <div class="child"><div>This div will always be the same width as the preceding div, even if its content is longer (or shorter too).</div></div> 
 
</div>