Come allineare 3 div left-center-right?

Come allineare 3 div in una riga sinistra-centro-destra senza dover definire dimensioni esplicite?Come allineare 3 div left-center-right?

La parte sinistra deve essere allineata per la maggior parte sul bordo sinistro e sul margine destro.

Quanto segue non funziona:

<div style="float: left;"> 
    left 
</div> 
<div style="float: right;"> 
    right 
</div> 
<div style="margin: 0 auto;"> 
    center 
</div>

fonte

2013-02-28 membersound

Quando faccio questo, di solito almeno 2 dal 3 hanno taglie che posso specificare, e ho solo il terzo aggiustamento agli altri due – ppeterka

Non capisco qual è il problema con il codice che hai scritto. fa proprio quello che hai descritto: http://jsfiddle.net/tagCs/ –

Aggiungere un wrapper div e dare text-align:center

CSS

.wrap{ 
     text-align:center 
    }

HTML

<div class="wrap"> 
<div class="left"> 
    left 
</div> 
<div class="right"> 
    right 
</div> 
<div class="center"> 
    center sdv dg sdb sdfbh sdfhfdhh h dfh 
</div> 
    </div>

DEMO

fonte

2013-02-28 11:39:11 Sowmya

Ho applicato text-align: center al wrapper con 3 immagini, qualcuno può spiegare perché funziona? –

<div style="width:100%;margin:0 auto; padding: 0"> 
    <div style=" float:left;width:32%;border: thin solid black"> 
     left 
    </div> 
    <div style=" float:left;width:32%;border: thin solid black"> 
     center 
    </div> 
    <div style=" float:left;width:32%;border: thin solid black"> 
      right 
    </div> 
</div> 
<div style="clear:both"> 
</div>

fonte

2013-02-28 11:33:21 zkanoca

Hai provato questo? Non funziona per me: http://jsfiddle.net/eqAyg/ – membersound

Ho digitato accidentalmente la proprietà float in stile div principale. Dovrebbe essere in ogni div interno. – zkanoca

Ecco un esempio di come fare questo mettendo i carri nell'ordine corretto.

jsFiddle Example

<div class="square" style="float: left;">left</div> 
<div class="square" style="float: right;">right</div> 
<div class="square" style="margin:0 auto !important;">center</div> 


.square { 
width:50px; 
height:50px; 
background-color:#ff0000; 
text-align:center; 
border: 1px solid #000; 
}

fonte

2013-02-28 11:38:10 chriz

Prova questo

CSS

div{width:33%;}

HTML

<div style="float: left;border:1px solid red;"> 
    left 
</div> 
<div style="float: right;border:1px solid green;"> 
    right 
</div> 
<div style="margin: 0 auto;border:1px solid blue;"> 
    center 
</div>

fonte

2013-02-28 11:41:16

In realtà non è possibile farlo, senza conoscere il contenuto e il modello di layout. Ma per un punto di inizio, si può provare questo:

HTML:

<div class="clearfix holder"> 
    <div class="column left"> 
     Some Contents Here... 
    </div> 
    <div class="column middle"> 
     Some Contents Here... 
    </div> 
    <div class="column right"> 
     Some Contents Here... 
    </div> 
</div>

CSS:

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    *zoom: 1; 
} 
.holder{ 
    text-align:center; 
} 
.column{ 
    display:inline-block; 
    *display:inline; 
    *zoom:1; 
    width:auto; 
} 
.left{ 
    background-color:#ff0; 
    float:left; 
} 
.middle{ 
    background-color:#f0f; 
    margin:0 auto; 
} 
.right{ 
    background-color:#0ff; 
    float:right; 
}

DEMO

fonte

2013-02-28 11:45:12

Come allineare 3 div left-center-right?

risposta

Problemi correlati