Jak mogę zmienić kolejność div przy użyciu tylko CSS?

Biorąc pod uwagę szablon, w którym HTML nie może być modyfikowany z powodu innych wymagań, w jaki sposób można wyświetlić (zmienić kolejność) jeden divnad drugim, divgdy nie są w tej kolejności w HTML? Oba divzawierają dane o różnej wysokości i szerokości.

<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

Mamy nadzieję, że oczywistym jest, że pożądanym rezultatem jest:

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

Po ustaleniu wymiarów łatwo je ustawić w razie potrzeby, ale potrzebuję pomysłów na to, kiedy treść jest zmienna. Ze względu na ten scenariusz, po prostu rozważ szerokość jako 100% w obu przypadkach.

W szczególności szukam rozwiązania opartego wyłącznie na CSS (i prawdopodobnie będzie musiało zostać spełnione inne rozwiązania, jeśli to się nie powiedzie).

Po tym są inne elementy. Wspomniano dobrą sugestię, biorąc pod uwagę ograniczony scenariusz, który pokazałem - biorąc pod uwagę, że może to być najlepsza odpowiedź, ale staram się również upewnić, że nie wpłynie to na następujące po niej elementy.

To rozwiązanie wykorzystuje tylko CSS i działa ze zmienną zawartością

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

Rozwiązanie tylko CSS (działa dla IE10 + ) - użyj orderwłaściwości 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>

Więcej informacji: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Jak powiedzieli inni, nie jest to coś, co chciałbyś robić w CSS. Możesz łączyć go z absolutnym pozycjonowaniem i dziwnymi marginesami, ale to po prostu nie jest solidne rozwiązanie. Najlepszym rozwiązaniem w twoim przypadku byłoby przejście na javascript. W jQuery jest to bardzo proste zadanie:

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

lub bardziej ogólnie:

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

Można to zrobić za pomocą Flexbox.

Utwórz kontener, który stosuje zarówno display: flex, jak i flex-flow: odwrócenie kolumny .

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

Źródła:

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

Nie ma absolutnie żadnego sposobu na osiągnięcie tego, co chcesz za pomocą samego CSS, przy jednoczesnym wsparciu programów użytkownika pre-flexbox ( głównie stary IE ) - chyba że :

1. Znasz dokładną renderowaną wysokość każdego elementu (jeśli tak, możesz absolutnie ustawić zawartość). Jeśli masz do czynienia z treściami generowanymi dynamicznie, nie masz szczęścia.
2. Znasz dokładną liczbę tych elementów. Ponownie, jeśli musisz to zrobić dla kilku fragmentów treści generowanych dynamicznie, nie masz szczęścia, zwłaszcza jeśli jest ich więcej niż trzy.

Jeśli powyższe są prawdziwe, możesz zrobić, co chcesz, absolutnie ustawiając elementy -

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

Ponownie, jeśli nie wiesz, jakiej wysokości chcesz przynajmniej #firstDiv, nie możesz zrobić tego, co chcesz za pomocą samego CSS. Jeśli którakolwiek z tych treści jest dynamiczna, będziesz musiał użyć javascript.

Oto rozwiązanie:

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

Ale podejrzewam, że masz trochę treści, które są zgodne z div otoki…

Dzięki modułowi układu flexbox CSS3 możesz zamówić div.

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

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

Jeśli wiesz lub możesz wymusić rozmiar elementu, który ma być wyższy, możesz użyć

position : absolute;

W swoim css i podaj divs ich pozycję.

w przeciwnym razie javascript wydaje się jedyną drogą:

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

lub coś podobnego.

edit: Właśnie znalazłem to, co może być przydatne: w3 document css3 move-to

Ujemne górne marginesy mogą osiągnąć ten efekt, ale należy je dostosować dla każdej strony. Na przykład ten znacznik ...

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

... i ten CSS ...

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

... pozwoli ci przeciągnąć drugi akapit powyżej pierwszego.

Oczywiście będziesz musiał ręcznie dostosować swój CSS dla różnych długości opisu, aby akapit wprowadzający przeskoczył odpowiednią ilość, ale jeśli masz ograniczoną kontrolę nad innymi częściami i pełną kontrolę nad znacznikami i CSS, może to być opcja .

Cóż, z odrobiną pozycjonowania bezwzględnego i pewnym niepewnym ustawieniem marginesu, mogę się zbliżyć, ale nie jest to idealne ani ładne:

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

„Margines na górze: 4em” to szczególnie paskudny bit: margines ten należy dostosować do ilości treści w pierwszymDiv. W zależności od dokładnych wymagań może to być możliwe, ale mam nadzieję, że ktoś będzie w stanie zbudować na tym solidne rozwiązanie.

Komentarz Erica na temat JavaScript powinien być prawdopodobnie kontynuowany.

Można to zrobić tylko za pomocą CSS!

Sprawdź moją odpowiedź na to podobne pytanie:

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

Nie chcę podwójnie publikować mojej odpowiedzi, ale w skrócie jest to, że rodzic musi zostać elementem Flexbox. Na przykład:

(używając tylko prefiksu dostawcy Webkit tutaj.)

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

Następnie zamień divy, wskazując ich kolejność za pomocą:

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

W swoim CSS, przestaw pierwszy div przez lewy lub prawy. Unieś drugi div o lewą lub prawą stronę tak samo jak pierwszy. Zastosuj clear: leftlub righttak samo jak powyższe dwa div dla drugiego div.

Na przykład:

#firstDiv {
    float: left;
}

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

Jeśli używasz tylko css, możesz użyć 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>

Szukałem sposobu, aby zmienić kolejność div tylko dla wersji mobilnej, więc mogę ładnie ją stylizować. Dzięki odpowiedzi na nick napisałem ten fragment kodu, który działał dobrze dla tego, czego chciałem, więc pomyślałem o udostępnieniu go wam:

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

Rozwiązanie z większą obsługą przeglądarki niż Flexbox (działa w 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

W przeciwieństwie do display: table;rozwiązania to rozwiązanie działa, gdy .wrapperma dowolną liczbę dzieci.

Wystarczy użyć flex dla div div, określając display: flexi flex-direction : column. Następnie użyj kolejności, aby ustalić, który z div dziecka jest pierwszy

CSS naprawdę nie powinien być używany do restrukturyzacji zaplecza HTML. Jest to jednak możliwe, jeśli znasz wysokość obu elementów i czujesz się jak hack. Również zaznaczanie tekstu będzie pomieszane podczas przechodzenia między divami, ale to dlatego, że kolejność HTML i CSS jest odwrotna.

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

Gdzie XXX i YYY to odpowiednio wysokość firstDiv i secondDiv. Będzie to działać z końcowymi elementami, w przeciwieństwie do najwyższej odpowiedzi.

Mam znacznie lepszy kod, stworzony przeze mnie, jest tak duży, żeby pokazać obie rzeczy ... stworzyć tabelę 4x4 i wyrównać w pionie więcej niż jedną komórkę.

Nie używa żadnego hakowania IE, bez pionowego wyrównania: środek; w ogóle...

Nie służy do pionowego wyśrodkowywania tabeli, display: table-rom; display: komórka tabeli;

Wykorzystuje lewę kontenera, który ma dwa divy, jeden ukryty (pozycja nie jest poprawna, ale sprawia, że ​​rodzic ma prawidłowy rozmiar zmiennej), jeden widoczny tuż po ukrytym, ale z górą: -50%; więc porusza się, aby poprawić pozycję.

Zobacz klasy div, które sprawiają, że podstęp: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

Przepraszam, że używam hiszpańskiego na nazwach zajęć (to dlatego, że mówię po hiszpańsku i jest to tak trudne, że jeśli używam angielskiego, zgubiłem się).

Pełny kod:

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

Trochę późno na imprezę, ale możesz też to zrobić:

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

Lub ustaw pozycję bezwzględną dla elementu i odsuń marginesy, deklarując je od krawędzi strony, a nie od krawędzi obiektu. Użyj%, ponieważ jest bardziej odpowiedni dla innych rozmiarów ekranu ect. W ten sposób pokonałem problem ... Dzięki, mam nadzieję, że tego właśnie szukasz ...

Tylko dla CSS rozwiązanie 1. Każda wysokość owijki powinna być stała lub 2. wysokość drugiego diva powinna być stała

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

To jest proste z css, po prostu użyj display:blocki z-indexwłasności

Oto przykład:

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

Edycja: Dobrze jest ustawić niektóre background-colorz nich, div-saby prawidłowo widzieć rzeczy.

Mam prosty sposób to zrobić.

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