Comment puis-je réorganiser mes divs en utilisant uniquement CSS?

Étant donné un modèle où le HTML ne peut pas être modifié en raison d'autres exigences, comment est-il possible d'afficher (réorganiser) un divau - dessus d'un autre divalors qu'ils ne sont pas dans cet ordre dans le HTML? Les deux divs contiennent des données dont la hauteur et la largeur varient.

<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

J'espère qu'il est évident que le résultat souhaité est:

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

Lorsque les dimensions sont fixes, il est facile de les positionner là où c'est nécessaire, mais j'ai besoin de quelques idées pour quand le contenu est variable. Pour ce scénario, veuillez simplement considérer la largeur à 100% sur les deux.

Je recherche spécifiquement une solution CSS uniquement (et elle devra probablement être rencontrée avec d'autres solutions si cela ne fonctionne pas).

Il y a d'autres éléments après cela. Une bonne suggestion a été mentionnée étant donné le scénario limité que j'ai démontré - étant donné que cela pourrait être la meilleure réponse, mais je cherche également à m'assurer que les éléments suivants ne sont pas affectés.

Cette solution utilise uniquement du CSS et fonctionne avec un contenu variable

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

Une solution CSS uniquement (fonctionne pour IE10 + ) - utilisez Flexboxorder propriété :

Démo: 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>

Plus d'informations: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Comme d'autres l'ont dit, ce n'est pas quelque chose que vous voudriez faire en CSS. Vous pouvez le truquer avec un positionnement absolu et des marges étranges, mais ce n'est tout simplement pas une solution robuste. La meilleure option dans votre cas serait de vous tourner vers javascript. Dans jQuery, c'est une tâche très simple:

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

ou plus génériquement:

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

Cela peut être fait en utilisant Flexbox.

Créez un conteneur qui applique à la fois display: flex et flex-flow: column-reverse .

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

Sources:

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

Il n'y a absolument aucun moyen d'atteindre ce que vous voulez via CSS seul tout en prenant en charge les agents utilisateurs pré-flexbox ( principalement les anciens IE ) - à moins que :

1. Vous connaissez la hauteur de rendu exacte de chaque élément (si c'est le cas, vous pouvez absolument positionner le contenu). Si vous avez affaire à du contenu généré dynamiquement, vous n'avez pas de chance.
2. Vous connaissez le nombre exact de ces éléments. Encore une fois, si vous devez le faire pour plusieurs morceaux de contenu générés dynamiquement, vous n'avez pas de chance, surtout s'il y en a plus de trois ou plus.

Si ce qui précède est vrai, vous pouvez faire ce que vous voulez en positionnant absolument les éléments -

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

Encore une fois, si vous ne connaissez pas la hauteur souhaitée pour au moins #firstDiv, il n'y a aucun moyen de faire ce que vous voulez via CSS seul. Si l'un de ces contenus est dynamique, vous devrez utiliser javascript.

Voici une solution:

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

Mais je soupçonne que vous avez du contenu qui suit la div wrapper ...

Avec le module de mise en page CSS3 flexbox, vous pouvez commander des divs.

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

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

Si vous connaissez ou pouvez appliquer la taille de l'élément à être supérieur, vous pouvez utiliser

position : absolute;

Dans votre css et donnez aux divs leur position.

sinon javascript semble la seule solution:

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

ou quelque chose de similaire.

edit: Je viens de trouver ce qui pourrait être utile: w3 document css3 move-to

Les marges supérieures négatives peuvent produire cet effet, mais elles devraient être personnalisées pour chaque page. Par exemple, ce balisage ...

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

... et ce CSS ...

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

... vous permettrait de tirer le deuxième paragraphe au-dessus du premier.

Bien sûr, vous devrez modifier manuellement votre CSS pour différentes longueurs de description afin que le paragraphe d'introduction augmente la quantité appropriée, mais si vous avez un contrôle limité sur les autres parties et un contrôle total sur le balisage et le CSS, cela pourrait être une option .

Eh bien, avec un peu de positionnement absolu et un réglage de marge douteux, je peux me rapprocher, mais ce n'est pas parfait ou joli:

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

Le "margin-top: 4em" est le bit particulièrement méchant: cette marge doit être ajustée en fonction de la quantité de contenu dans le premierDiv. En fonction de vos besoins exacts, cela pourrait être possible, mais j'espère quand même que quelqu'un pourra s'appuyer sur cela pour une solution solide.

Le commentaire d'Eric sur JavaScript devrait probablement être poursuivi.

Cela ne peut être fait qu'avec CSS!

Veuillez vérifier ma réponse à cette question similaire:

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

Je ne veux pas poster deux fois ma réponse, mais le plus court est que le parent doit devenir un élément flexbox. Par exemple:

(en utilisant uniquement le préfixe du fournisseur de webkit ici.)

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

Ensuite, permutez les divisions en indiquant leur ordre avec:

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

Dans votre CSS, faites flotter le premier div à gauche ou à droite. Faites flotter le deuxième div à gauche ou à droite comme le premier. Appliquer clear: leftouright les mêmes que les deux div ci-dessus pour le deuxième div.

Par exemple:

#firstDiv {
    float: left;
}

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

Si vous utilisez simplement css, vous pouvez utiliser 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>

Je cherchais un moyen de modifier les ordres des divs uniquement pour la version mobile, alors je peux le styler bien. Grâce à la réponse de Nickf, j'ai pu créer ce morceau de code qui fonctionnait bien pour ce que je voulais, alors j'ai pensé à le partager avec vous:

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

Une solution avec un support de navigateur plus grand que la flexbox (fonctionne dans 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

Contrairement à la display: table;solution, cette solution fonctionne quand .wrappera une quantité d'enfants.

Utilisez simplement flex pour le parent div en spécifiant display: flexet flex-direction : column. Ensuite, utilisez l'ordre pour déterminer lequel des enfants div vient en premier

CSS ne devrait vraiment pas être utilisé pour restructurer le backend HTML. Cependant, cela est possible si vous connaissez la hauteur des deux éléments impliqués et que vous vous sentez hackish. De plus, la sélection de texte sera gâchée lors du passage entre les divs, mais c'est parce que l'ordre HTML et CSS sont opposés.

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

Où XXX et YYY sont respectivement les hauteurs de firstDiv et secondDiv. Cela fonctionnera avec les éléments de fin, contrairement à la réponse du haut.

J'ai un bien meilleur code, fait par moi, il est si gros, juste pour montrer les deux choses ... créer un tableau 4x4 et aligner verticalement plus d'une cellule.

Il n'utilise aucun hack IE, pas d'alignement vertical: middle; du tout...

Il n'utilise pas pour le centrage vertical display-table, display: table-rom; affichage: table-cellule;

Il utilise l'astuce d'un conteneur qui a deux divs, un caché (la position n'est pas correcte mais fait que le parent a la bonne taille variable), un visible juste après le caché mais avec top: -50%; il est donc nécessaire de corriger la position.

Voir les classes div qui font l'affaire: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

Veuillez m'excuser d'utiliser l'espagnol sur les noms de cours (c'est parce que je parle espagnol et c'est tellement délicat que si j'utilise l'anglais je me perds).

Le code complet:

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

Un peu tard pour la fête, mais vous pouvez aussi le faire:

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

Ou définissez une position absolue pour l'élément et travaillez hors des marges en les déclarant à partir du bord de la page plutôt que du bord de l'objet. Utilisez% comme son plus approprié pour les autres tailles d'écran ect. C'est ainsi que j'ai surmonté le problème ... Merci, j'espère que c'est ce que vous cherchez ...

Pour la solution CSS uniquement 1. La hauteur du wrapper doit être fixe ou la hauteur du deuxième div doit être fixe

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

C'est facile avec css, il suffit d'utiliser display:blocket de z-indexpropriété

Voici un exemple:

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

Edit: Il est bon de mettre un peu background-colorà div-svoir les choses correctement.

J'ai un moyen simple de le faire.

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