CSS: tre colonne problema layout

Question

Come posso modificare questo:

<div style="border: solid 1px red; text-align: center"> 
    <div style="background-color: yellow; float: left">left</div> 
    middle 
    <div style="float:right; background-color: yellow">right</div> 
</div> 

in modo che "destra" è in linea verticale con "sinistra"?

Ecco ciò che il mio male css assomiglia resa:

left     middle 
              right 

grazie!

Answer 1

Se si utilizza un ‘float: right’, ne fanno la prima cosa sulla linea:

<div style="border: solid 1px red; text-align: center"> 
    <div style="float:right; background-color: yellow">right</div> 
    <div style="background-color: yellow; float: left">left</div> 
    middle 
</div> 

Altrimenti si cade sempre nella prossima riga di testo.

ma perché !!!!!

(1) Perché una volta che hai iniziato a inserire il testo statico su una linea, hai una larghezza indeterminata per adattarla a un elemento fluttuato. Diciamo che ha scritto:

abc abc abc <div style="float: left">xyz xyz</div> abc abc abc 

Ora immaginate di iniziare il ridimensionamento quella finestra verso il basso in modo che “abc abc abc” appena si inserisce sulla prima riga. Ora incontri un float e provi ad includerlo sulla linea in cui ti trovi. Ma non va bene: per adattarlo, dovresti avere "abc xyz xyz" sulla linea, facendo scorrere il rimanente "abc" alla riga successiva. Ma! Ora hai spostato il punto di inserimento del float lungo una linea, quindi il galleggiante deve scendere anche una linea. Ma! Ora la prima riga non è avvolta correttamente, perché c'è spazio per tre "abc", ma la linea è stata chiusa prematuramente per far posto a un float che si verifica effettivamente più in basso nella pagina ...

Lo standard CSS risolve questa empasse logica facendo un float su una linea con testo inline prima di aspettare la riga successiva.

(2) Perché questo è ciò che Netscape ha fatto con <img float="right"> molti, molti anni fa.

Answer 2

"middle" ha bisogno di essere in un div a sé stante o può buttare fuori il vostro display

Answer 3

Aggiornato:

<div style="border: solid 1px red; text-align: center"> 
    <div style="background-color: yellow; float: left">left</div> 
    <div style="float:right" background-color: yellow">right</div> 
    <div style="float:none">middle</div> 
</div> 

Answer 4

Fai middle un div, galleggiare a sinistra e specificare larghezze per tutti tre contenitori. Inoltre, puoi rendere l'ambiente circostante divoverflow: auto, altrimenti collasserà su se stesso.

Answer 5

provare qualcosa del genere:

<div style="border: solid 1px red; text-align: centerl width:100px"> 
      <div style="background-color: yellow; float: left; width:30px">left</div> 
      <div style="background-color: yellow; float: left; width:30px">middle</div> 
      <div style="background-color: yellow; float: left; width:30px">right</div> 
</div> 

Answer 6

ho ottenuto quello che vi serve *:

<table style='border: 1px solid red; width: 100%; border-collapse: collapse;'> 
    <tr> 
    <td style='background-color: yellow; width: 25%;'>left</td> 
    <td style='text-align: center;'>middle</td> 
    <td style='background-color: yellow; width: 25%; text-align: right;'>right</td> 
    </tr> 
</table> 

Thank Me Later!

* disclaimer: Sono solo al 95% serio.

Answer 7

Per eseguire ciò che si sta tentando di fare, è necessario posizionare la colonna destra prima della colonna centrale.

<div style="border: solid 1px red; text-align: center"> 
     <div style="background-color: yellow; float: left">left</div> 
     <div style="float:right; background-color: yellow">right</div> 
     middle 
</div> 

Perché la colonna destra è posizionata relativamente al suo contesto che è una linea sotto il contenuto centrale.

Answer 8

Questo funziona senza ri-organizzare l'ordine dei contenuti

<style type="text/css"> 
    .column 
    { 
    float: left; 
    width:33.3%; 
    } 

    #container 
    { 
    text-align: center; 
    width:100%; 
    } 

    .clearfix 
    { 
    display: inline-block; 
    } 
</style> 
<div id="container" class="clearfix"> 
     <div class="column">left</div> 
     <div class="column">middle</div> 
     <div class="column">right</div> 
</div> 

Si può anche cadere il 33% e renderli rappresentativi del vostro disegno, o anche fare una larghezza fissa sulle colonne. In questa causa, utilizza gli ID anziché le classi.

Answer 9

Stai parlando il "Sacro Graal", come in questo A List Apart article

Answer 10

3 column layout generator