Come posso riordinare i miei div utilizzando solo CSS?

Dato un modello in cui l'HTML non può essere modificato a causa di altri requisiti, come è possibile visualizzare (riorganizzare) uno divsopra l'altro divquando non sono in quell'ordine nell'HTML? Entrambi divcontengono dati che variano in altezza e larghezza.

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

Spero sia ovvio che il risultato desiderato sia:

Content to be above in this situation
Content to be below in this situation
Other elements

Quando le dimensioni sono fisse, è facile posizionarle dove necessario, ma ho bisogno di alcune idee per quando il contenuto è variabile. Per motivi di questo scenario, ti preghiamo di considerare la larghezza del 100% su entrambi.

Sto specificatamente cercando una soluzione solo CSS (e probabilmente dovrà essere soddisfatta con altre soluzioni se ciò non va fuori).

Ci sono altri elementi che seguono questo. Un buon suggerimento è stato menzionato dato lo scenario limitato che ho dimostrato, dato che potrebbe essere la risposta migliore, ma sto cercando di assicurarmi anche che gli elementi seguenti non siano interessati.

Questa soluzione utilizza solo CSS e funziona con contenuto variabile

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

Una soluzione solo CSS (funziona per IE10 + ) - usa la orderproprietà Flexbox :

Demo: http://jsfiddle.net/hqya7q6o/596/

#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }

<div id="flex">
   <div id="a">A</div>
   <div id="b">B</div>
   <div id="c">C</div>
</div>

Maggiori informazioni: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Come altri hanno già detto, questo non è qualcosa che vorresti fare nei CSS. Puoi sfumarlo con un posizionamento assoluto e strani margini, ma non è solo una soluzione robusta. L'opzione migliore nel tuo caso sarebbe quella di passare a JavaScript. In jQuery, questo è un compito molto semplice:

$('#secondDiv').insertBefore('#firstDiv');

o più genericamente:

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());
});

Questo può essere fatto usando Flexbox.

Crea un contenitore che applica sia display: flex che flex-flow: inversione di colonna .

/* -- Where the Magic Happens -- */

.container {
  
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;

}


/* -- Styling Only -- */

.container > div {
  background: red;
  color: white;
  padding: 10px;
}

.container > div:last-of-type {
  background: blue;
}

<div class="container">
  
  <div class="first">

     first

  </div>
  
  <div class="second">

    second

  </div>
  
</div>

fonti:

• https://css-tricks.com/using-flexbox/
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow#Browser_compatibility

Non esiste assolutamente alcun modo per ottenere ciò che si desidera tramite i soli CSS, supportando al contempo i programmi utente pre-flexbox (per lo più vecchi IE ), a meno che :

1. Conosci l'esatta altezza di rendering di ogni elemento (in tal caso, puoi assolutamente posizionare il contenuto). Se hai a che fare con contenuti generati dinamicamente, sei sfortunato.
2. Sai il numero esatto di questi elementi ci sarà. Ancora una volta, se è necessario farlo per diversi blocchi di contenuto generati dinamicamente, si è sfortunati, soprattutto se ce ne sono più di tre.

Se quanto sopra è vero, puoi fare quello che vuoi posizionando assolutamente gli elementi -

#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }

Ancora una volta, se non si conosce l'altezza desiderata per almeno #firstDiv, non è possibile fare ciò che si desidera solo tramite CSS. Se uno di questi contenuti è dinamico, dovrai usare javascript.

Ecco una soluzione:

<style>
#firstDiv {
    position:absolute; top:100%;
}
#wrapper {
    position:relative; 
}

Ma sospetto che tu abbia del contenuto che segue il div wrapper ...

Con il modulo layout flexbox CSS3, puoi ordinare div.

#wrapper {
  display: flex;
  flex-direction: column;
}
#firstDiv {
  order: 2;
}

<div id="wrapper">
  <div id="firstDiv">
    Content1
  </div>
  <div id="secondDiv">
    Content2
  </div>
</div>

Se lo sai, o puoi imporre la dimensione dell'elemento superiore, puoi usarlo

position : absolute;

Nel tuo css e dai ai div la loro posizione.

altrimenti JavaScript sembra l'unica strada da percorrere:

fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );

o qualcosa di simile.

modifica: ho appena trovato questo che potrebbe essere utile: w3 document css3 move-to

I margini superiori negativi possono ottenere questo effetto, ma dovrebbero essere personalizzati per ogni pagina. Ad esempio, questo markup ...

<div class="product">
<h2>Greatest Product Ever</h2>
<p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p>
<p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p>
</div>

... e questo CSS ...

.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }

... ti permetterebbe di tirare il secondo paragrafo sopra il primo.

Ovviamente, dovrai modificare manualmente il tuo CSS per diverse lunghezze di descrizione in modo che il paragrafo introduttivo salti la quantità appropriata, ma se hai un controllo limitato sulle altre parti e il pieno controllo su markup e CSS, questa potrebbe essere un'opzione .

Bene, con un po 'di posizionamento assoluto e un po' di impostazione del margine instabile, posso avvicinarmi, ma non è perfetto o carino:

#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }

Il "margin-top: 4em" è il bit particolarmente brutto: questo margine deve essere regolato in base alla quantità di contenuto nel primoDiv. A seconda delle tue esatte esigenze, questo potrebbe essere possibile, ma spero comunque che qualcuno possa essere in grado di basarsi su questo per una soluzione solida.

Il commento di Eric su JavaScript dovrebbe probabilmente essere perseguito.

Questo può essere fatto solo con CSS!

Controlla la mia risposta a questa domanda simile:

https://stackoverflow.com/a/25462829/1077230

Non voglio doppio postare la mia risposta, ma il punto è che il genitore deve diventare un elemento flexbox. Per esempio:

(utilizzando solo il prefisso del fornitore di webkit qui.)

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

Quindi, scambia i div indicando il loro ordine con:

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

Nel tuo CSS, sposta il primo div a sinistra oa destra. Float il secondo div da sinistra o destra come il primo. Applica clear: leftoright lo stesso delle due div precedenti per la seconda div.

Per esempio:

#firstDiv {
    float: left;
}

#secondDiv {
    float: left;
    clear: left;
}

Se usi semplicemente css, puoi usare flex.

.price {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: row-reverse; //revert horizontally
    //flex-direction: column-reverse; revert vertically
}

<div class="price">
      <div>first block</div>
      <div>second block</div>
</div>

Stavo cercando un modo per cambiare gli ordini dei div solo per la versione mobile, quindi posso modellarlo bene. Grazie alla risposta del nick ho avuto modo di realizzare questo pezzo di codice che funzionava bene per quello che volevo, quindi ho pensato di condividerlo con voi ragazzi:

//  changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
    if ( jQuery(window).width() < 480 )
    {
        jQuery('#main-content').insertBefore('#sidebar');
    }
    if ( jQuery(window).width() > 480 )
    {
        jQuery('#sidebar').insertBefore('#main-content');
    }
    jQuery(window).height(); // New height
    jQuery(window).width(); // New width
});

Una soluzione con un supporto browser più grande rispetto alla flexbox (funziona in IE≥9):

#wrapper {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
#wrapper > * {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

A differenza della display: table;soluzione, questa soluzione funziona quando .wrapperha un numero qualsiasi di bambini.

Basta usare flex per il div genitore specificando display: flexe flex-direction : column. Quindi usa order per determinare quale div figlio viene prima

I CSS non dovrebbero davvero essere usati per ristrutturare il backend HTML. Tuttavia, è possibile se conosci l'altezza di entrambi gli elementi coinvolti e ti senti hacker. Inoltre, la selezione del testo verrà incasinata quando ci si sposta tra i div, ma questo perché l'ordine HTML e CSS sono opposti.

#firstDiv { position: relative; top: YYYpx; height: XXXpx; }
#secondDiv { position: relative; top: -XXXpx; height: YYYpx; }

Dove XXX e YYY sono rispettivamente le altezze di firstDiv e secondDiv. Funzionerà con elementi finali, a differenza della risposta principale.

Ho un codice molto migliore, creato da me, è così grande, solo per mostrare entrambe le cose ... creare una tabella 4x4 e allineare verticalmente più di una sola cella.

Non utilizza alcun hack IE, nessun allineamento verticale: medio; affatto...

Non utilizza per la centratura verticale display-table, display: table-rom; visualizzare: table-cell;

Usa il trucco di un contenitore che ha due div, uno nascosto (la posizione non è corretta ma rende il genitore ha la dimensione variabile corretta), uno visibile subito dopo il nascosto ma con la parte superiore: -50%; quindi è il motore a correggere la posizione.

Guarda le classi div che fanno il trucco: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

Ci scusiamo per l'uso dello spagnolo sui nomi delle classi (è perché parlo spagnolo e questo è così difficile che se uso l'inglese mi perdo).

Il codice completo:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="en" />
<title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title>
<style type="text/css">
 html,body{
  margin:0px;
  padding:0px;
  width:100%;
  height:100%;
 }
 div.BloqueTipoTabla{
  display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoFila_AltoAjustadoAlContenido{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoFila_AltoRestante{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoCelda_AjustadoAlContenido{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto;
 }
 div.BloqueTipoCelda_RestanteAncho{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoCelda_RestanteAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%;
 }
 div.BloqueTipoCelda_RestanteAnchoAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoContenedor{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative;
 }
 div.BloqueTipoContenedor_VerticalmenteCentrado{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Visible{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%;
 }
</style>
</head>
<body>
<h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1>
<div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;">
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [1,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,4]
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [2,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,4]
  </div>
</div>
 <div class="BloqueTipoFila_AltoRestante">
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAnchoAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [4,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,4]
  </div>
 </div>
</div>
</body>
</html>

Poco in ritardo alla festa, ma puoi anche farlo:

<div style="height: 500px; width: 500px;">

<div class="bottom" style="height: 250px; width: 500px; background: red; margin-top: 250px;"></div>

<div class="top" style="height: 250px; width: 500px; background: blue; margin-top: -500px;"></div>

Oppure imposta una posizione assoluta sull'elemento e elimina i margini dichiarandoli dal bordo della pagina anziché dal bordo dell'oggetto. Usa% come più adatto per altre dimensioni dello schermo ecc. Ecco come ho superato il problema ... Grazie, spero sia quello che stai cercando ...

Solo per CSS Soluzione 1. L'altezza del wrapper deve essere fissa o 2. l'altezza del secondo div deve essere fissa

.move-wrap {
    display: table;
    table-layout: fixed; // prevent some responsive bugs
    width: 100%; // set a width if u like
    /* TODO: js-fallback IE7 if u like ms */
}

.move-down {
    display: table-footer-group;
}

.move-up {
    display: table-header-group;
}

È facile con css, basta usare display:blockez-index proprietà

Ecco un esempio:

HTML:

<body>
    <div class="wrapper">

        <div class="header">
            header
        </div>

        <div class="content">
            content
        </div>
    </div>
</body>

CSS:

.wrapper
{
    [...]
}

.header
{
    [...]
    z-index:9001;
    display:block;
    [...]
}

.content
{
    [...]
    z-index:9000;
    [...]
}

Modifica: è bene impostare alcuni background-colorsu div-sper vedere le cose correttamente.

Ho un modo semplice per farlo.

<!--  HTML  -->

<div class="wrapper">

    <div class="sm-hide">This content hides when at your layouts chosen breaking point.</div>

    <div>Content that stays in place</div>

    <div class="sm-show">This content is set to show at your layouts chosen breaking point.</div>

</div>

<!--  CSS  -->

    .sm-hide {display:block;}
    .sm-show {display:none;}

@media (max-width:598px) {
    .sm-hide {display:none;}
    .sm-show {display:block;}
}