Layout di stile tabella con alternanza di righe invertite e senza markup per righe

Sto cercando di ottenere il seguente layout con i CSS, ogni numero è un blocco di contenuto di uguale larghezza:

Visualizzazione mobile:

1 2 3 4 5 6 7 8 

Vista desktop:

 1 | 2 ----- 4 | 3 ----- 5 | 6 ----- 8 | 7 

Notare che 3-4 e 7-8 sono invertiti nel layout desktop.

Siccome 3-4 e 7-8 non sono collegati semanticamente, preferisco non accoppiarli con un elemento HTML genitore (quindi visualizzare: il layout della tabella probabilmente non è un’opzione).

Nella vista desktop, l’elemento 1 deve avere la stessa altezza dell’elemento 2 e 3 lo stesso di 4 ecc., Ma l’altezza non è nota in anticipo e non voglio usare JavaScript (quindi i float sono fuori come sarebbero diverse altezze, a meno che non ci fosse un modo di usare calc CSS).

Quindi, supponendo che 1-8 siano tutti elementi di sezione della stessa div genitrice, come si può ottenere senza JavaScript?

Non sono sicuro che esista una soluzione, ma penso che questo sia qualcosa che i CSS dovrebbero essere in grado di supportare, quindi le risposte possono includere bozze o CSS in gran parte non supportati.

Flexbox potrebbe farlo, ma richiede sapere in anticipo esattamente quanti elementi ci sono.

http://codepen.io/cimmanon/pen/EDzGt

 ul { width: 5em; display: -ms-flexbox; display: -webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @supports (flex-wrap: wrap) { /* hide from experimental Firefox */ ul { display: flex; } } li { -webkit-flex: 1 50%; -ms-flex: 1 50%; flex: 1 50%; } li:nth-child(3), li:nth-child(5), li:nth-child(6) { -ms-flex-order: 2; -webkit-order: 2; order: 2; } li:nth-child(4) { -ms-flex-order: 1; -webkit-order: 1; order: 1; } li:nth-child(7) { -ms-flex-order: 4; -webkit-order: 4; order: 4; } li:nth-child(8) { -ms-flex-order: 3; -webkit-order: 3; order: 3; } 

Tieni presente che ciò funzionerà solo nei browser che supportano Flexbox e il wrapping. Supporto browser corrente: Chrome, Opera, IE10, Blackberry 10 (Firefox lo avrà presto ).

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

float 3, 4, 7 e 8 proprio come qui: http://jsfiddle.net/KH584/

 .three, .four, .seven, .eight{ float:right; } 

In base alla risposta di cimmanon e ai miei commenti successivi, sono stato in grado di utilizzare una combinazione di flexbox, wrapping e posizionamento relativo.

CSS:

 ul { width: 100%; display: -ms-flexbox; display: -webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; padding: 0; } @supports (flex-wrap: wrap) { ul { display: flex; } } li { -webkit-flex: 1 50%; -ms-flex: 1 50%; flex: 1 50%; outline: 1px solid red; width: 50%; } li:nth-child(4n) { position: relative; left: -50%; } li:nth-child(4n-1) { position: relative; left: 50%; } 

HTML:

 
  • 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • 2
  • 3
  • 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • 5
  • 6
  • 7 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • 8

http://codepen.io/penx/pen/fnrJE