Sposta la colonna più a sinistra in un design reattivo
https://stackoverflow.com/questions/8844521
-
27-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto lavorando per fare una riprogettazione del sito web del mio giornale del college e ho ottenuto il design per adattarsi perfettamente a un iPad. Ora sto cercando di passare a un layout di una colonna (per i telefoni intelligenti).
Il problema è che, in un layout a colonna singola, la colonna destra deve andare sopra la colonna sinistra. Saprei come farlo se il codice per la colonna destra fosse scritto prima della colonna sinistra, ma sfortunatamente non lo è.
Come posso spostare la colonna sinistra sotto la colonna destra? Devo usare JavaScript per cambiare gli ordini di colonna nel codice HTML? Grazie!
MODIFICARE: Mi rendo conto di poter avere un div invisibile quando la larghezza> somenumo. Preferirei non dover essere ridondante però ...
Soluzione
L'unica soluzione CSS è iniziare con lo schermo più piccolo man mano che il design predefinito migliora con l'aumentare della dimensione dello schermo utilizzando le query multimediali. A partire dal più piccolo schermo prima mette il markup nell'ordine corretto-per l'immagine sopra banner, navigazione primaria, contenuto principale (colonna di destra), a parte (colonna sinistra) e (presumibilmente), piè di pagina. Poiché le query multimediali applicano CSS aggiuntive, è possibile fluttuare il contenuto principale a destra e da parte a sinistra: gli elementi sono posizionati correttamente per schermi più piccoli o più grandi.
Altri suggerimenti
Il modo più semplice che riesco a pensare di farlo è con JQuery (una libreria JavaScript) per rimuovere il contenuto della colonna giusta da un div a un altro nel DOM. Ciò consente di creare e rimuovere i Div al volo in modo che non vi sia ridondanza alla fine.
Se questo è troppo vago, commenta e aggiungerò un esempio.
CSS può eliminare gli elementi dal flusso di documenti e metterli ovunque, in qualsiasi modo desideri. Ma non può creare un nuovo flusso di documenti (cioè non può riordinare gli elementi). È necessario posizionare un elemento rispetto all'altro o posizionarli entrambi assolutamente.
Se hai accesso a JavaScript e non sei preoccupato per la graziosa degredazione, potresti anche scambiare il .Innerhtml dei due div.
