Comment puis-je réorganiser mes div avec CSS?

Étant donné un modèle où le code HTML ne peut pas être modifié en raison d’autres exigences, comment est-il possible d’afficher (réorganiser) un div au-dessus d’un autre div lorsqu’ils ne sont pas dans cet ordre dans le code HTML? Les deux div s contiennent des données qui varient en hauteur et en largeur.

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

Espérons que le résultat souhaité est évident:

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

Lorsque les dimensions sont fixées, il est facile de les positionner si nécessaire, mais j’ai besoin d’idées pour savoir quand le contenu est variable. Pour des raisons de ce scénario, considérez simplement la largeur à 100% sur les deux.

Je recherche spécifiquement une solution CSS uniquement (et il faudra probablement la résoudre avec d’autres solutions si cela ne se fait pas).

Il y a d’autres éléments qui suivent. 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 à faire en sorte que les éléments qui suivent ne soient pas affectés.

Cette solution utilise uniquement CSS et fonctionne avec un contenu variable

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

Une solution uniquement en CSS (fonctionne pour IE10 + ) – utilisez la propriété order de Flexbox:

Démo: http://jsfiddle.net/hqya7q6o/596/

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

Comme d’autres l’ont déjà dit, ce n’est pas quelque chose que vous voudriez faire en CSS. Vous pouvez le manipuler avec un positionnement absolu et des marges étranges, mais ce n’est pas une solution robuste. La meilleure option dans votre cas serait de passer au 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 les deux affichages: flex et flex-flow: reverse-column .

 /* -- 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; } 
 
first
second

Il n’y a absolument aucun moyen de réaliser ce que vous voulez grâce à CSS tout en prenant en charge les agents utilisateurs pré-flexbox ( principalement les anciens IE ) – sauf si :

  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é dynamicment, 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 dynamicment, vous n’avez pas de chance, surtout s’il y en a plus de trois.

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, vous ne pouvez pas faire ce que vous voulez via CSS seul. Si l’un de ces contenus est dynamic, vous devrez utiliser javascript.

Voici une solution:

  

Mais je soupçonne que vous avez un contenu qui suit le div wrapper ...

Avec CSS3, vous pouvez commander des div.

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

Si vous connaissez ou pouvez appliquer la taille de l’élément to-be-upper, vous pouvez utiliser

 position : absolute; 

Dans votre css et donnez aux divs leur position.

sinon javascript semble être la seule voie à suivre:

 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 doivent être personnalisées pour chaque page. Par exemple, ce balisage …

 

Greatest Product Ever

This paragraph appears in the source code directly after the heading and will appear in the search results.

Note: This information appears in HTML after the product description appearing below.

… 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 saute le niveau approprié, mais si vous avez un contrôle limité sur les autres parties et un contrôle total du balisage et des CSS, cela pourrait être une option .

Eh bien, avec un peu de positionnement absolu et un réglage de marge louche, je peux me rapprocher, mais ce n’est ni parfait ni 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 particulièrement désagréable: cette marge doit être ajustée en fonction de la quantité de contenu dans le firstDiv. Selon vos besoins, cela pourrait être possible, mais j’espère de toute façon que quelqu’un pourrait tirer parti de cette solution solide.

Le commentaire d’Eric sur le javascript devrait probablement être poursuivi.

tu as juste besoin de ça! dans css flotter premier div par la gauche ou la droite. flotter seconde div par gauche ou droite même comme premier. effacer à gauche ou à droite comme ci-dessus deux div pour la deuxième div. par exemple:

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

Amusez-vous mon ami.

Cela peut être fait avec CSS seulement!

S’il vous plaît vérifier ma réponse à cette question similaire:

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

Je ne veux pas doubler ma réponse, mais le fait est que le parent doit devenir un élément flexbox. Par exemple:

(utilisez uniquement le préfixe du fournisseur 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, échangez les divs 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; } 

Je cherchais un moyen de changer les commandes des divs uniquement pour la version mobile alors je peux le styler gentiment. Grâce à nickf reply, j’ai réussi à créer ce morceau de code qui a bien fonctionné pour ce que je voulais, donc je l’ai partagé 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 important 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); } 
 
Content to be below in this situation
Content to be above in this situation
Other elements

Utilisez simplement flex pour le div parent en spécifiant display: flex et flex-direction : column . Ensuite, utilisez l’ordre pour déterminer quelle div de l’enfant vient en premier

CSS ne devrait vraiment pas être utilisé pour restructurer le backend HTML. Cependant, il est possible si vous connaissez la hauteur des deux éléments impliqués et que vous vous sentez hackers. En outre, la sélection de texte sera perturbée entre les div, 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 meilleure réponse.

J’ai un code bien meilleur, fait par moi, il est tellement gros, juste pour montrer les deux choses … créer une table 4×4 et un alignement vertical plus qu’une seule cellule.

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

Il n’utilise pas pour la table d’affichage de centrage vertical, affichage: table-rom; afficher: cellule de table;

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

Voir les cours div qui font le tour: BloqueTipoContenedor BloqueTipoContenedor_VerticalmenteCentrado BloqueTipoContenido_VerticalmenteCentrado_Oculto BloqueTipoContenido_VerticalmenteCentrado_Visible

S’il vous plaît désolé d’avoir utilisé l’espagnol sur les noms de classes (c’est parce que je parle espagnol et c’est tellement difficile que si j’utilise l’anglais je me perds).

Le code complet:

        Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so sortingcky!!!    

Vertical Centering in CSS2 - Example
(IE, FF & Chrome tested)
This is so sortingcky!!!

[1,1]
[1,2]
[1,3]
[1,4]
[2,1]
[2,2]
[2,3]
[2,4]
The cell [3,1]
* * * *
* * * *
* * * *
Now is the highest one
The cell [3,1]
* * * *
* * * *
* * * *
Now is the highest one
This is
cell [3,2]
This is
cell [3,2]
This is cell [3,3]
It is duplicated on source to make the sortingck to know its variable height
First copy is hidden and second copy is visible
Other cells of this row are not correctly aligned only on IE!!!
This is cell [3,3]
It is duplicated on source to make the sortingck to know its variable height
First copy is hidden and second copy is visible
Other cells of this row are not correctly aligned only on IE!!!
This other is
the cell [3,4]
This other is
the cell [3,4]
[4,1]
[4,2]
[4,3]
[4,4]

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

 

Ou définissez une position absolue sur l’élément et supprimez les marges en les déclarant depuis le bord de la page plutôt que sur le bord de l’object. Utilisez% comme son plus approprié pour d’autres tailles d’écran ect. Voilà comment j’ai surmonté le problème … Merci, j’espère que c’est ce que vous cherchez …

Pour la solution CSS Only 1. La hauteur du wrapper doit être fixe ou la hauteur de la deuxième div doit être fixée.

 .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, utilisez simplement display:block et z-index property

Voici un exemple:

HTML:

  
header
content

CSS:

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

Edit: Il est bon de définir une background-color de background-color pour les div-s pour voir les choses correctement.

J’ai un moyen simple de le faire.

  
This content hides when at your layouts chosen breaking point.
Content that stays in place
This content is set to show at your layouts chosen breaking point.
.sm-hide {display:block;} .sm-show {display:none;} @media (max-width:598px) { .sm-hide {display:none;} .sm-show {display:block;} }