Bagaimana saya bisa memesan ulang divs saya hanya menggunakan CSS?

Diberi templat di mana HTML tidak dapat dimodifikasi karena persyaratan lain, bagaimana mungkin menampilkan (mengatur ulang) di divatas yang lain divketika mereka tidak dalam urutan itu dalam HTML? Keduanya divberisi data yang bervariasi dalam tinggi dan lebar.

<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

Semoga jelas bahwa hasil yang diinginkan adalah:

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

Ketika dimensi diperbaiki mudah untuk memposisikannya di tempat yang diperlukan, tetapi saya perlu beberapa ide ketika kontennya variabel. Demi skenario ini, anggap saja lebarnya 100% untuk keduanya.

Saya secara khusus mencari solusi CSS saja (dan mungkin harus dipenuhi dengan solusi lain jika itu tidak berhasil).

Ada elemen lain yang mengikuti ini. Sebuah saran bagus disebutkan mengingat skenario terbatas yang saya tunjukkan — mengingat bahwa itu mungkin jawaban terbaik, tetapi saya juga ingin memastikan elemen-elemen berikut ini tidak terpengaruh.

Solusi ini hanya menggunakan CSS dan berfungsi dengan konten variabel

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

Solusi khusus CSS (berfungsi untuk IE10 + ) - gunakan orderproperti 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>

Info lebih lanjut: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Seperti yang orang lain katakan, ini bukan sesuatu yang ingin Anda lakukan di CSS. Anda dapat menggunakannya dengan posisi absolut dan margin aneh, tapi itu bukan solusi yang kuat. Opsi terbaik dalam kasus Anda adalah beralih ke javascript. Di jQuery, ini adalah tugas yang sangat sederhana:

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

atau lebih umum:

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

Ini dapat dilakukan menggunakan Flexbox.

Buat wadah yang menggunakan kedua tampilan: flex dan flex-flow: kolom-mundur .

/* -- 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>

Sumber:

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

Sama sekali tidak ada cara untuk mencapai apa yang Anda inginkan melalui CSS saja sambil mendukung agen pengguna pra-flexbox ( kebanyakan IE lama ) - kecuali :

1. Anda tahu tinggi yang diberikan tepat dari setiap elemen (jika demikian, Anda benar-benar dapat memposisikan konten). Jika Anda berurusan dengan konten yang dihasilkan secara dinamis, Anda kurang beruntung.
2. Anda tahu jumlah pasti dari elemen-elemen ini akan ada. Sekali lagi, jika Anda perlu melakukan ini untuk beberapa potongan konten yang dihasilkan secara dinamis, Anda kurang beruntung, terutama jika ada lebih dari tiga atau lebih.

Jika hal di atas benar maka Anda dapat melakukan apa yang Anda inginkan dengan benar-benar memposisikan elemen -

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

Sekali lagi, jika Anda tidak tahu ketinggian yang diinginkan untuk setidaknya #firstDiv, tidak mungkin Anda dapat melakukan apa yang Anda inginkan melalui CSS saja. Jika ada konten ini yang dinamis, Anda harus menggunakan javascript.

Inilah solusinya:

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

Tapi saya curiga Anda memiliki beberapa konten yang mengikuti ...

Dengan modul tata letak flexbox CSS3, Anda dapat memesan divs.

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

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

Jika Anda tahu, atau dapat menegakkan ukuran untuk elemen yang akan menjadi bagian atas, Anda bisa menggunakannya

position : absolute;

Di css Anda dan berikan posisi mereka pada div.

jika tidak, javascript sepertinya satu-satunya cara:

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

atau yang serupa.

sunting: Saya baru saja menemukan ini yang mungkin berguna: dokumen w3 css3 pindah ke

Margin teratas negatif dapat mencapai efek ini, tetapi mereka harus disesuaikan untuk setiap halaman. Misalnya, markup ini ...

<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>

... dan CSS ini ...

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

... akan memungkinkan Anda untuk menarik paragraf kedua di atas paragraf pertama.

Tentu saja, Anda harus men-tweak CSS Anda secara manual untuk panjang deskripsi yang berbeda sehingga paragraf intro melonjak jumlah yang sesuai, tetapi jika Anda memiliki kontrol terbatas atas bagian-bagian lain dan kontrol penuh atas markup dan CSS maka ini mungkin menjadi pilihan .

Nah, dengan sedikit positioning absolut dan beberapa pengaturan margin yang cerdik, saya bisa mendekati, tapi itu tidak sempurna atau cantik:

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

"Margin-top: 4em" adalah bit yang sangat jahat: margin ini perlu disesuaikan sesuai dengan jumlah konten di firstDiv. Bergantung pada kebutuhan Anda yang sebenarnya, ini mungkin saja terjadi, tetapi saya tetap berharap bahwa seseorang mungkin dapat membangun ini untuk solusi yang solid.

Komentar Eric tentang JavaScript mungkin harus dikejar.

Ini hanya dapat dilakukan dengan CSS!

Silakan periksa jawaban saya untuk pertanyaan serupa ini:

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

Saya tidak ingin menggandakan posting jawaban saya tetapi singkatnya adalah bahwa orang tua perlu menjadi elemen flexbox. Misalnya:

(hanya menggunakan awalan vendor webkit di sini.)

#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;
}

Kemudian, bertukar div di sekitar dengan menunjukkan pesanan mereka dengan:

#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;
}

Di CSS Anda, apungkan div pertama dengan kiri atau kanan. Apung div kedua dengan kiri atau kanan sama dengan yang pertama. Terapkan clear: leftatau rightsama dengan dua div di atas untuk div kedua.

Sebagai contoh:

#firstDiv {
    float: left;
}

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

Jika Anda hanya menggunakan css, Anda bisa menggunakan 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>

Saya sedang mencari cara untuk mengubah perintah div hanya untuk versi mobile sehingga saya dapat menata dengan baik. Terima kasih kepada nickf reply, saya harus membuat kode ini yang bekerja dengan baik untuk apa yang saya inginkan, jadi saya berbagi dengan kalian:

//  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
});

Solusi dengan dukungan browser yang lebih besar daripada flexbox (berfungsi di 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

Berbeda dengan display: table;solusi , solusi ini bekerja ketika .wrappermemiliki jumlah anak berapa pun.

Cukup gunakan flex untuk div induk dengan menentukan display: flexdan flex-direction : column. Kemudian gunakan perintah untuk menentukan div anak mana yang lebih dulu

CSS seharusnya tidak digunakan untuk merestrukturisasi backend HTML. Namun, adalah mungkin jika Anda mengetahui ketinggian kedua elemen yang terlibat dan merasa peretasan. Juga, pemilihan teks akan kacau ketika pergi antara divs, tapi itu karena urutan HTML dan CSS berlawanan.

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

Di mana XXX dan YYY adalah ketinggian firstDiv dan secondDiv masing-masing. Ini akan bekerja dengan elemen tambahan, tidak seperti jawaban teratas.

Saya memiliki kode yang jauh lebih baik, dibuat oleh saya, itu sangat besar, hanya untuk menunjukkan kedua hal ... buat tabel 4x4 dan selaraskan vertikal lebih dari satu sel.

Itu tidak menggunakan hack IE, tidak ada vertical-align: middle; sama sekali...

Itu tidak digunakan untuk tampilan-tabel centering vertikal, display: table-rom; display: table-cell;

Menggunakan trik wadah yang memiliki dua divs, satu disembunyikan (posisi bukan yang benar tetapi membuat orang tua memiliki ukuran variabel yang benar), satu terlihat setelah disembunyikan tetapi dengan atas: -50%; jadi penggerak untuk memperbaiki posisi.

Lihat kelas div yang menghasilkan trik: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

Mohon maaf karena menggunakan bahasa Spanyol pada nama kelas (itu karena saya berbicara bahasa Spanyol dan ini sangat rumit sehingga jika saya menggunakan bahasa Inggris saya tersesat).

Kode lengkap:

<?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>

Agak terlambat ke pesta, tetapi Anda juga bisa melakukan ini:

<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>

Atau atur posisi absolut ke elemen dan atur margin dengan mendeklarasikannya dari tepi halaman, bukan dari tepi objek. Gunakan% karena lebih cocok untuk ukuran layar lain, dll. Ini adalah bagaimana saya mengatasi masalah ini ... Terima kasih, harap ini yang Anda cari ...

Untuk solusi CSS Only 1. Ketinggian wrapper harus diperbaiki atau 2. tinggi div kedua harus diperbaiki

.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;
}

Mudah dengan css, cukup gunakan display:blockdan z-indexproperti

Berikut ini sebuah contoh:

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;
    [...]
}

Sunting: Adalah baik untuk mengatur beberapa background-coloragar div-sdapat melihat sesuatu dengan benar.

Saya punya cara sederhana untuk melakukan ini.

<!--  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;}
}