Come Impostare la Larghezza Dinamica Div

Question

Qui è la mia situazione.Ho un div contenitore che ha (n) elementi del bambino all'interno di esso.Per questo esempio, diciamo che ci sono 2 div all'interno del div contenitore:

<div id="container">
    <div id="col1">
        Stuff in col1
    </div>
    <div id="col2">
        Stuff in col2
    </div>
</div>

Il div contenitore sarà una percentuale della finestra, l ' 80%.Ora, quello che sto cercando è per questi due interiore div (col1 & col2) per essere in linea con gli altri e prendere la stessa quantità di spazio.Quindi il risultato dovrebbe essere qualcosa di simile a questo:

+-------------- container -------------+
|  +---- col1 ----+  +---- col2 ----+  |
|  | stuff in     |  | stuff in     |  |
|  | col1         |  | col2         |  |
|  +--------------+  +--------------+  |
+--------------------------------------+  

O se il contenitore larghezza è cambiato dovrebbe tradursi in qualcosa di simile a questo:

+------------------------------ container -----------------------------+
|  +------------ col1 ------------+  +------------ col2 ------------+  |
|  | stuff in col1                |  | stuff in col2                |  |
|  | stuff in col1                |  | stuff in col2                |  |
|  +------------------------------+  +------------------------------+  |
+----------------------------------------------------------------------+

L'interno i div sono sempre la stessa larghezza, e alcuni hanno la separazione dall'altro.Questo è simile a una tabella di layout, ma preferirei non usare le tabelle, se possibile.Ho provato varie tecniche come galleggiante e visualizzare il div inline senza alcun risultato.Essi non possono mai sembrano align giusto.

Answer 1

cellule tabella potrebbe allungare automaticamente. Non è esattamente possibile con div, in modo da avere per specificare la larghezza adeguata per ogni colonna a mano. Ad esempio:

#col1, #col2 {
    float: left;
    width: 50%;
}

Answer 2

fare col1 e col2 campate (non div) con

vertical-align:top
display:inline-block
width:50%

ovviamente (regolare la larghezza di spiegare i margini / imbottitura e consiglia di utilizzare percentuali di margine / padding in modo da aggiungere fino a poco meno del 100% vedi:. http://ejohn.org/blog/sub-pixel-problems-in-css/ )

Answer 3

La mia soluzione preferita

Utilizzare posizionamento relativo contenitore esterno:

#container, #container > div  
{
    position: relative;
}

#col1  
{
     left: 2%; /* your margin */
}

#col2  
{
     right: 2%;
}

#container > div 
{
     width: 47%;
}

Nota che si lascia circa lo stesso 2% nel medio.Il #col1 e #col2 dovrebbe essere allineato ora.

Altre soluzioni

Con CSS3:utilizzare column-count: 2 e la colonna pausa dopo il primo div.

Se davvero la sensazione di galleggiare, non solo #col1 { float: left; width: 50%; }

Answer 4

#container{
overflow: hidden
} 

#col1, #col2 {
    float: left;
    width: 50%;
}

Answer 5

Forse l'uso di display: table; aiuterebbe? http://jsfiddle.net/g4dGz/119/