Float left and right

questo problema mi ha infastidito per qualche tempo. Così ho creato alcune descrizioni visive del mio problemaFloat left and right

Prima ecco la mia struttura HTML Ho 6 div .. il primo 3 float a sinistra e l'ultimo 3 a destra. L'ultima immagine mostra il risultato che voglio ma non riesco a ottenere. Può qualcuno là fuori mi può aiutare qui

EDIT // Siamo spiacenti heres il mio HTML e CSS

<style> 
    .left { float:left; } 
    .right { float:right; } 
</style> 
<div id="container"> 
    <div class="left"></div> 
    <div class="left"></div> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="right"></div> 
    <div class="right"></div> 
</div>

NOTA: non posso fare a destra sinistra destra sinistra sinistra diritto di opzione, perché Im ottenendo i miei dati da PHP tramite una query al mio database .. prima query va a sinistra seconda query va a destra .... grazie un gruppo

/EDIT

This is a mocukup of my HTML structure

mio f loats risultato in questo

this is my current result

Questo è quello che voglio

I want this

fonte

2012-06-12 Oldenborg

Si prega di inserire il codice ... –

+1 per le belle immagini, -1 per nessun markup o CSS a tutti nella domanda! –

una sinistra, una destra –

È possibile utilizzare la proprietà CSS3 column-count per questo. Scrivere in questo modo:

.parent{ 
    -moz-column-count: 2; 
    -moz-column-gap: 50%; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 50%; 
    column-count: 2; 
    column-gap: 50%; 
} 
.parent div{ 
    width:50px; 
    height:50px; 
    margin:10px; 
} 
.left{ 
    background:red; 
} 
.right{ 
    background:green; 
}

Scegli questa http://jsfiddle.net/UaFFP/6/

fonte

2012-06-12 10:48:08 sandeep

È utile menzionare il supporto del browser ogni volta che rispondi alle colonne CSS3: http://caniuse.com/multicolumn. Ad esempio, questo non funzionerà in IE9, che molte persone devono supportare. – thirtydot

Questo era esattamente quello che stavo cercando. Ma ho bisogno di supporto per ie7 e fino. Quindi non è del tutto utile .. ma hai avuto l'idea giusta come la maggior parte di ppl non ha funzionato. Quindi grazie. – Oldenborg

Per IE è possibile utilizzare questo JS http://www.csscripting.com/css-multi-column/ – sandeep

Inserisci la prima div sinistra, poi la prima a destra div e dopo di loro aggiungono <br style="clear:both"> e ripetere la procedura.

Edit: Ecco una risposta aggiornata:

<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div> 
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div> 
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>

fonte

2012-06-12 10:12:59

Spiacente, questa non è un'opzione – Oldenborg

Perché? Puoi fare in modo che **
** non abbia alcuna rappresentazione visiva. –

Sto lavorando su un progetto in cui l'unico thig a cui ho accesso è i file CSS .. tutto il resto è offlits – Oldenborg

Float uno a sinistra, uno a destra, e dare prima il clear: both proprietà

<div class="left clear"></div> 
<div class="right"></div> 
<div class="left clear"></div> 
<div class="right"></div>

css

.left {float:left} 
.right {float:right} 
.clear {clear:both}

Example

fonte

2012-06-12 10:14:59

@jacktheripper: buono, lo hai fatto prima di me –

Supponiamo di avere un altro div in mezzo a loro. Quindi utilizzare questo ordine cronologico:

<div class="left"></div> 
<div class="right"></div> 
<div class="content"></div>

O se non lo fai, basta aggiungere un altro div che forniscono uno stile clear:both ad esso.

fonte

2012-06-12 10:15:31

classe non id;) –

oh, sì. Grazie @khaled_webdev –

Anche dover manipolare l'ordine degli elementi non è una buona soluzione. – crush

Utilizzando il: selettore nth-child e compensazione dopo 2 div:

div { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    float: left; 
} 
div:nth-child(2n) { 
    background-color: green; 
    float: right; 
}

Live example

utilizzare altrimenti metodo abbastanza hacky, che non richiede alcuna marcatura addizionale:

div { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    float: left; 
} 
div:nth-child(n) { 
    clear: both; 
} 

div:nth-child(2n) { 
    background-color: green; 
    float: right; 
    margin-top: -50px; //match this to the div height 
}

Live example

fonte

2012-06-12 10:19:47 jacktheripper

Ho provato a modificarlo un po 'ma non riesco a farlo bene. Qui è dove Im at, non posso toccare l'HTML .. questo è fisso .. Posso solo lavorare con il CSS [Esempio dal vivo] (http://jsfiddle.net/nSDcb/) – Oldenborg

<style type="text/css"> 

.parent {width:50px; border:1px solid red;} 

.left {float:left; } 

.right{float:right;} 

.child{height:50px;width:50px;border:solid 1px green;margin:0 0 10px 0;} 

</style> 

<body> 

<div class="left parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

<div class="right parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

</body> 

</html>

Mente sarebbe strano non avere un DIV centrale, se questo è un caso fluttua i DIV parent rimasti, ad esempio larghezza del 20% 60% 20%.

fonte

2012-06-12 10:30:40 bdede

Ho fatto questo, ma Im istruito non toccare l'HTML, posso solo modificare il CSS – Oldenborg

HTML:

<div class="leftcolums"> 
    <div class="left">1</div> 
    <div class="left">2</div> 
    <div class="left">3</div>  
</div> 
<div class="rightcolums"> 
    <div class="right">4</div> 
    <div class="right">5</div> 
    <div class="right">6</div> 
</div> 
<div class="clear"></div>

STILI:

.leftcolums{float:left;} 
.rightcolums{float:right;} 
.clear{clear:both;}

fonte

2014-02-15 21:43:06

column-count è già ampiamente supportato - http://caniuse.com/#feat=multicolumn Quindi, se i vecchi browser doesn' Non preoccuparti di prendere in considerazione l'utilizzo di i t.

fonte

2016-01-30 18:18:40 Vlad

E cosa si fa con esso (per risolvere il problema dell'OP)? – dakab

Vorrei sapere, 3 anni dopo: D – Oldenborg

Float left and right

risposta

Problemi correlati