CSS 3 DIV in una riga: 2 correzione 1 regolazione automatica

Question

Sto cercando di capire come creare 3 div e farli allineare nella stessa riga. Avendo 1a e 3a larghezza fissa a 100px e il 2o (medio) uno aggiusta la sua larghezza in caso di ridimensionamento del browser.

<div> 
    <div id="d1"> content 1</div> 
    <div id="d2"> content 2</div> 
    <div id="d3"> content 3</div> 
</div> 

grazie,

Answer 1

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

sciopero che, molti div supplementare per garantire tutte le colonne sono uguali in altezza. This may be what you're looking for. tutto spiegato in questo eccellente articolo: http://www.alistapart.com/articles/holygrail

Answer 2

Hai uso tp galleggia per allineare il sinistro e destro del telaio. Ma per questo devi riordinare i div come mostrato sotto, e impostare i margini per il div medio.

<style type="text/css"> 
#d1 { 
    float: left; 
} 

#d2 { 
    float: right; 
} 

#d3 { 
    margin-left: 100px; 
    margin-right: 100px; 
} 
</style> 

<div> 
    <div id="d1"> content 1</div> 
    <div id="d2"> content 2</div> 
    <div id="d3"> content 3</div> 
</div> 

Modifica

Grazie a Leniel Macaferi per indicare un errore. L'ordine corretto di div s deve prima essere mobile div s, quindi non mobile div s. Pertanto ho corretto il codice (scambiato div d2 e div d3).

Answer 3

NVM questo è vecchio, stavo per posta che cosa ha funzionato per me

<style type="text/css"> 
#d1 { 

    float: left; 
    margin-left: 50px; 

} 

#d2 { 
    float: center; 
    margin-right: 5px; 
} 

#d3 { 
float: left; 
margin-right: 5px; 
} 
</style> 

<div> 
    <div id="d1"> content 1</div> 
    <div id="d3"> content 3</div> 
    <div id="d2"> content 2</div> 
</div> 

Answer 4

Div è un elemento a livello di blocco, quindi è una bella opzione per gestire con la aiuto della sua proprietà di visualizzazione.

<div id="d1" style="display:inline-block; width:100px;">content1</div> 
<div id="d2" style="display:inline">content2</div> 
<div id="d3" style="display:inline-block; width:100px;">content3</div>​ 

Answer 5

Basta mettere questo fuori là come una soluzione moderna, pulita: utilizzare calc. Fiddle: http://jsfiddle.net/bg7KS/

#d2 { 
    width: 200px; /* fallback older browsers */ 
    width: -webkit-calc(100% - 200px); 
    width: -moz-calc(100% - 200px); 
    width: calc(100% - 200px); 
}