Modifica ordine di div galleggiavano con i CSS

JSFIDDLEModifica ordine di div galleggiavano con i CSS

voglio cambiare l'ordine di div galleggiava ad una certa dimensione dei pixel.

Allo stato predefinito entrambi hanno una larghezza del 50% e sono uno accanto all'altro.

Sotto la dimensione dello schermo 600px (o w/e non importa) Voglio che il secondo div (quello rosso) fluttui sopra il primo div (quello giallo).

Come è possibile con la soluzione solo CSS?

HTML

<div class="yellow"></div> 
<div class="red"></div>

CSS

.yellow { 
    background: yellow; 
    width: 50%; 
    height: 300px; 
    float:left; 
} 

.red { 
    background: red; 
    width: 50%; 
    height: 300px; 
    float:left; 
} 

@media screen and (max-width:600px) { 
    .yellow { 
     background: yellow; 
     width: 100%; 
     height: 300px; 
     float:left; 
    } 

    .red { 
     background: red; 
     width: 100%; 
     height: 300px; 
     float:left; 
    } 
}

La soluzione che voglio è:

ROSSO DIV

GIALLO DIV

ma ora è:

GIALLO DIV

ROSSO DIV

fonte

2014-09-07 vaskort

[This] (http://jsfiddle.net/uh7zLphk/1/) è un approccio leggermente diverso ma ha una modifica all'HTML. – Harry

Bello, ma avrai solo la "sensazione" che galleggiano: lasciato solo se entrambi hanno il 50% di larghezza. Cambierò i pixel di ciascuno a un valore fisso. – vaskort

È vero. [This] (http://jsfiddle.net/uh7zLphk/11/) è un altro approccio possibile. – Harry

So che mi stai chiedendo come realizzare questo utilizzando i float, ma per quanto ne so usando puro CSS questo è impossibile (almeno senza usare un posizionamento brutto, che hai detto che non vuoi fare).

Per quanto ne so l'unico modo per ottenere questo risultato con puro HTML/CSS è utilizzare il nuovo flexbox spec (un buon punto di partenza sarebbe probabilmente this css tricks article).

Quando si utilizza FlexBox è possibile utilizzare la proprietà order su oggetti di dettare quale ordine gli elementi appaiono in (duh)

Si può vedere un esempio di questo in azione here, il codice HTML è simile a quello che hai , con un elemento avvolgitore aggiunto (ho anche sistemato la dichiarazione DOCTYPE):

<!DOCTYPE html> 
<div class="wrapper"> 
    <div class="yellow"> 
    </div> 
    <div class="red"> 
    </div> 
</div>

il CSS è un po 'diverso:

.wrapper { 
    display: flex; 
    flex-flow: row wrap; 
} 

.yellow { 
    background: yellow; 
    width: 20%; 
    height: 300px; 
} 

.red { 
    background: red; 
    width: 20%; 
    height: 300px; 
} 

@media screen and (max-width:600px) { 
    .yellow { 
     order: 2; 
     width: 100%; 
    } 

    .red { 
     order: 1; 
     width: 100%; 
    } 
}

Ho anche ripulito un po ', hai avuto il codice duplicato nella tua query multimediale che non ha davvero bisogno di essere lì.

L'unico aspetto negativo di questo è che attualmente funziona solo su circa l'80% dei browser come della scrittura:

http://caniuse.com/#search=flexbox

a seconda del vostro target di mercato che potrebbe essere OK, è possibile utilizzare il degrado grazioso così che appare correttamente in tutti i modi tranne che per gli ordini sui dispositivi che non supportano completamente il flexbox.

Immagino che tu stia anche prendendo di mira solo i dispositivi mobili con il riordino delle cose, il supporto è buono, quindi potrebbe funzionare bene per te.

fonte

2014-09-07 13:38:05 Sean

tenta di modificare la

HTML per questo -

<div class="container"> 
    <div class="yellow"></div> 
    <div class="red"></div> 
</div>

e la query @media CSS questo -

@media screen and (max-width:600px) { 
.container{ 
    display:flex; 
    flex-direction: column-reverse; 
} 
.yellow { 
    background: yellow; 
    width: 100%; 
    height: 300px; 

} 

.red { 
    background: red; 
    width: 100%; 
    height: 300px; 


} }

fonte

2014-09-07 13:37:20

Sì. Questa è la risposta precisa come approccio solo CSS. – Christina

Ecco una soluzione semplice che utilizza margini e galleggianti negativi.

Per il CSS, utilizzare il seguente:

@media screen and (max-width:600px) { 
    .yellow { 
     background: yellow; 
     width: 100%; 
     height: 300px; 
     float:left; 
     margin-top: 300px; 
    } 

    .red { 
     background: red; 
     width: 100%; 
     height: 300px; 
     float:left; 
     margin-left: -100%; 
    } 
}

tuo HTML rimane la stessa che avete inviato.

Aggiungere un margine superiore a .yellow utilizzando margin-top: 300px (uguale all'altezza del div rosso ).

Per il div rosso, aggiungere un margine sinistro negativo del 100%.

Questo obbligherà il div rosso a posizionarsi sul div giallo, ma dal momento che hai il div giallo un margine superiore, il div giallo si apre sotto il div rosso.

Il trucco è simile a quello utilizzato per il layout del layout di Holy Grail a 3 colonne.

See demo: http://jsfiddle.net/audetwebdesign/jux84wzk/

fonte

2014-09-07 13:53:57

Finora, non ci sono prime risposte mobili, che è meno righe di CSS e altri benefici. Questo tocca l'html, quindi non è la domanda dell'OP, per un approccio solo CSS è la risposta Flexbox di altri due peeps, che ho votato.

DEMO: http://jsfiddle.net/mhrf6d4n/

HTML, mettere in ordine fonte della più piccola finestra prima:

<div class="red"></div> 
<div class="yellow"></div>

CSS (mettere il comune, globale per tutte le finestre al di fuori della media query, combinare i selettori condivisi, quindi dopo aver inserito la larghezza minima e inserire i galleggianti lì)

.yellow, .red { 
    background: yellow; 
    height: 300px; 
} 
.red { 
    background: red; 
} 

@media screen and (min-width:600px) { 
    .yellow, .red { 
     float:left; 
     width:50%; 
    } 
}

fonte

2014-09-07 17:45:36 Christina

Il problema con il primo CSS mobile è che pur essendo "bello" e "più efficiente" scombina gli stili per IE8- (IE8 ignora qualsiasi css all'interno di una query multimediale) – Sean

respond.js, lo utilizza dal 2011. C'è un punto in cui non si vuole caricare tutti gli utenti di viewport di piccole dimensioni con grandi stili di visualizzazione e immagini di sfondo enormi. – Christina

Interessante, non ne ho mai sentito parlare (anche se sembra esistere un polyfill per qualsiasi cosa, quindi ha senso). Sembra che stia codificando per la prima volta il mio prossimo sito mobile :) grazie! – Sean

Modifica ordine di div galleggiavano con i CSS

risposta

Problemi correlati