Set div per avere suoi fratelli larghezza

Question

Sto cercando una soluzione CSS a quanto segue: -

<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>

Il wrapper div ha un display in linea e funziona come previsto, sia bambino le div hanno contenuto generato dinamicamente. Ho bisogno di quello inferiore per prendere la larghezza del fratello precedente.

Molte grazie per qualsiasi suggerimento in anticipo.

Answer 1

Non sono sicuro se ho capito ciò che si sta cercando di fare, ma sembra che l'impostazione di larghezza 100% fino all'ultimo div dovrebbe funzionare:

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

BTW lo stile nel primo div non è ben definito, è necessario utilizzare i due punti invece di un segno di uguale nella definizione proprietà:

<div style="display:inline;"> 

Answer 2

impostare il proprio div a display:inline-block, invece, in questo modo il vostro div si espanderà con il contenuto all'interno di esso.

http://jsfiddle.net/CpKDX/

Answer 3

UPDATE: Questo funziona con me, ho appena provato:

<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> 

E 'questo quello che vuoi? I bordi e sfondo sono solo per mostrare i div;)

---

Basta andare in questo modo:

Diciamo che si desidera che l'intero div essere max. 980px (altrimenti solo lasciare che fuori o sostituire con il 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 seconda opzione sarebbe, per usare ancora una div ... o si utilizza style="width:auto;" per il div dinamica ...

Answer 4

Galleggianti e tavoli sono così 2000 e in ritardo. Con i browser di oggi possiamo fare in modo che i due DIV di pari livello si adattino a vicenda, indipendentemente dal più grande/più piccolo.

Ecco una soluzione adatta Flexbox per il 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

Se il vostro disposti a rinunciare a un paio di <div> s, allora ho la soluzione per voi:

<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> 

ricordarsi di impostare il div display:inline-block;

Answer 6

Ecco un'altra soluzione Flexbox che consente al secondo bambino di avvolgere per abbinare la larghezza del fratello di altezza variabile.

.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>