Wie kann ich meine Divs nur mit CSS neu anordnen?

Wie ist es bei einer Vorlage, bei der der HTML-Code aufgrund anderer Anforderungen nicht geändert werden kann, möglich, eine divübereinander anzuzeigen (neu anzuordnen), divwenn sie im HTML-Code nicht in dieser Reihenfolge vorliegen? Beide divs enthalten Daten, die sich in Höhe und Breite unterscheiden.

<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

Hoffentlich ist es offensichtlich, dass das gewünschte Ergebnis ist:

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

Wenn die Abmessungen festgelegt sind, ist es einfach, sie bei Bedarf zu positionieren, aber ich brauche einige Ideen, wenn der Inhalt variabel ist. Für dieses Szenario betrachten Sie bitte einfach, dass die Breite bei beiden 100% beträgt.

Ich bin speziell auf der Suche nach einer Nur-CSS-Lösung (und sie muss wahrscheinlich mit anderen Lösungen erfüllt werden, wenn dies nicht gelingt).

Es folgen weitere Elemente. Angesichts des begrenzten Szenarios, das ich demonstriert habe, wurde ein guter Vorschlag erwähnt - da dies möglicherweise die beste Antwort ist, möchte ich jedoch auch sicherstellen, dass die darauf folgenden Elemente nicht beeinflusst werden.

Diese Lösung verwendet nur CSS und arbeitet mit variablen Inhalten

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

Eine reine CSS-Lösung (funktioniert für IE10 + ) - Verwenden Sie die orderEigenschaft von 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>

Weitere Informationen: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Wie andere gesagt haben, möchten Sie dies nicht in CSS tun. Sie können es mit absoluter Positionierung und seltsamen Rändern fummeln, aber es ist einfach keine robuste Lösung. Die beste Option in Ihrem Fall wäre, sich Javascript zuzuwenden. In jQuery ist dies eine sehr einfache Aufgabe:

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

oder allgemeiner:

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

Dies kann mit Flexbox erfolgen.

Erstellen Sie einen Container, der sowohl display: flex als auch flex-flow: column-reverse anwendet .

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

Quellen:

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

Es gibt absolut keine Möglichkeit, das, was Sie wollen, allein durch CSS zu erreichen, während Sie Pre-Flexbox-Benutzeragenten ( meistens alter IE ) unterstützen - es sei denn :

1. Sie kennen die genaue gerenderte Höhe jedes Elements (wenn ja, können Sie den Inhalt absolut positionieren). Wenn Sie mit dynamisch generierten Inhalten arbeiten, haben Sie kein Glück.
2. Sie kennen die genaue Anzahl dieser Elemente. Wenn Sie dies für mehrere Teile von Inhalten tun müssen, die dynamisch generiert werden, haben Sie kein Glück, insbesondere wenn mehr als drei vorhanden sind.

Wenn das oben Gesagte zutrifft, können Sie tun, was Sie wollen, indem Sie die Elemente absolut positionieren -

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

Wenn Sie die gewünschte Höhe für mindestens #firstDiv nicht kennen, können Sie das, was Sie möchten, nicht allein über CSS tun. Wenn einer dieser Inhalte dynamisch ist, müssen Sie Javascript verwenden.

Hier ist eine Lösung:

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

Aber ich vermute, Sie haben einige Inhalte, die dem Wrapper Div folgen ...

Mit dem CSS3-Flexbox-Layoutmodul können Sie Divs bestellen.

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

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

Wenn Sie die Größe des zu übergeordneten Elements kennen oder erzwingen können, können Sie sie verwenden

position : absolute;

In Ihrem CSS und geben Sie den Divs ihre Position.

Andernfalls scheint Javascript der einzige Weg zu sein:

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

oder etwas ähnliches.

edit: Ich habe gerade das gefunden, was nützlich sein könnte: w3 document css3 move-to

Negative obere Ränder können diesen Effekt erzielen, müssen jedoch für jede Seite angepasst werden. Zum Beispiel dieses 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>

... und dieses CSS ...

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

... würde es Ihnen ermöglichen, den zweiten Absatz über den ersten zu ziehen.

Natürlich müssen Sie Ihr CSS manuell für unterschiedliche Beschreibungslängen anpassen, damit der Intro-Absatz um den entsprechenden Betrag springt. Wenn Sie jedoch nur begrenzte Kontrolle über die anderen Teile und vollständige Kontrolle über Markup und CSS haben, ist dies möglicherweise eine Option .

Nun, mit ein bisschen absoluter Positionierung und einigen zwielichtigen Randeinstellungen kann ich näher kommen, aber es ist nicht perfekt oder hübsch:

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

Das "margin-top: 4em" ist das besonders unangenehme Bit: Dieser Rand muss entsprechend der Menge an Inhalten im firstDiv angepasst werden. Abhängig von Ihren genauen Anforderungen ist dies möglicherweise möglich, aber ich hoffe trotzdem, dass jemand darauf aufbauen kann, um eine solide Lösung zu finden.

Erics Kommentar zu JavaScript sollte wahrscheinlich weiterverfolgt werden.

Dies ist nur mit CSS möglich!

Bitte überprüfen Sie meine Antwort auf diese ähnliche Frage:

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

Ich möchte meine Antwort nicht doppelt posten, aber kurz gesagt, der Elternteil muss ein Flexbox-Element werden. Z.B:

(Verwenden Sie hier nur das Webkit-Herstellerpräfix.)

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

Tauschen Sie dann die Divs aus, indem Sie ihre Reihenfolge angeben mit:

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

Schweben Sie in Ihrem CSS das erste Div nach links oder rechts. Schweben Sie das zweite Div wie das erste nach links oder rechts. Übernehmen clear: leftoder rightgleich wie die beiden oben genannten Divs für den zweiten Div.

Beispielsweise:

#firstDiv {
    float: left;
}

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

Wenn Sie nur CSS verwenden, können Sie Flex verwenden.

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

Ich suchte nach einer Möglichkeit, die Reihenfolge der Divs nur für die mobile Version zu ändern, damit ich sie gut gestalten kann. Dank der Antwort von nickf konnte ich diesen Code erstellen, der gut für das funktionierte, was ich wollte, also dachte ich daran, ihn mit euch zu teilen:

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

Eine Lösung mit einer größeren Browserunterstützung als die Flexbox (funktioniert 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

Im Gegensatz zur display: table;Lösung funktioniert diese Lösung, wenn .wrappereine beliebige Anzahl von Kindern vorhanden ist.

Verwenden Sie einfach flex für das übergeordnete div, indem Sie display: flexund angeben flex-direction : column. Verwenden Sie dann die Reihenfolge, um zu bestimmen, welches der untergeordneten Div zuerst kommt

CSS sollte wirklich nicht zur Umstrukturierung des HTML-Backends verwendet werden. Es ist jedoch möglich, wenn Sie die Höhe beider beteiligten Elemente kennen und sich hackisch fühlen. Auch die Textauswahl wird beim Wechseln zwischen den Divs durcheinander gebracht, aber das liegt daran, dass die HTML- und CSS-Reihenfolge entgegengesetzt sind.

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

Wobei XXX und YYY die Höhen von firstDiv bzw. secondDiv sind. Dies funktioniert im Gegensatz zur Top-Antwort mit nachfolgenden Elementen.

Ich habe einen viel besseren Code, der von mir erstellt wurde. Er ist so groß, dass er nur beides zeigt. Erstellen Sie eine 4x4-Tabelle und richten Sie mehr als nur eine Zelle vertikal aus.

Es wird kein IE-Hack verwendet, keine vertikale Ausrichtung: Mitte; überhaupt...

Es wird nicht für die vertikale Zentrierung verwendet. Display-table, display: table-rom; Anzeige: Tabellenzelle;

Es wird der Trick eines Containers verwendet, der zwei Divs hat, einen ausgeblendeten (Position ist nicht die richtige, aber Eltern haben die richtige Variablengröße), einen direkt nach dem ausgeblendeten, aber mit oben: -50%; es ist also beweglich, die Position zu korrigieren.

Siehe div-Klassen, die den Trick machen: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

Bitte entschuldigen Sie, dass Sie Spanisch für Klassennamen verwenden (weil ich Spanisch spreche und dies so schwierig ist, dass ich mich verliere, wenn ich Englisch verwende).

Der vollständige Code:

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

Etwas spät zur Party, aber Sie können dies auch tun:

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

Oder legen Sie eine absolute Position für das Element fest und bearbeiten Sie die Ränder, indem Sie sie vom Rand der Seite und nicht vom Rand des Objekts aus deklarieren. Verwenden Sie%, da es besser für andere Bildschirmgrößen geeignet ist. So habe ich das Problem überwunden ... Danke, ich hoffe, es ist das, wonach Sie suchen ...

Nur für CSS-Lösung 1. Entweder sollte die Höhe des Wrappers fest sein oder 2. Die Höhe des zweiten Div sollte fest sein

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

Es ist einfach mit CSS, nur verwenden display:blockund z-indexEigentum

Hier ist ein Beispiel:

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

Bearbeiten: Es ist gut, einige background-colorauf die div-szu setzen, um die Dinge richtig zu sehen.

Ich habe einen einfachen Weg, dies zu tun.

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