Inverser 2éléments div [Résolu]

[fenrir0680]

Bonjour,

Après plusieurs recherches sur le forum, FAQ, ou cours CSS,je n'arrive pas à trouver de réponse.
Alors voilà, j'ai ce code :

Code :

1
2
3
4
5
6
 
<div class="conteneur">
          <div class="element1">element 1</div>
          <div class="element2">element 2</div>
          <div class="element3">element 3</div>
</div>

Et j'aurais voulu savoir si avec des CSS on peut obtenir cet affichage :

Code :

1
2
3
4
5
6
 
<div class="conteneur">
          <div class="element1">element 1</div>
          <div class="element3">element 3</div>
          <div class="element2">element 2</div>
</div>

Inverser les deux derniers éléments. Sachant que les éléments 1 et 3 sont de hauteur variable.
Le code est généré par wordpress, je n'ai pas le choix sur les conteneur DIV, ni sur les CLASS, et encore moins sur l'imbrication des différents éléments.

Merci d'avance pour vos réponses.

[e-fitz]

Bonsoir,

En css je ne vois pas de solution, tu peux le faire en javascript par contre, mais avec les problèmes de compatibilité que cela apporte.

Le problème vient surtout de la hauteur variable.

Bonne soirée

[fenrir0680]

C'est ce que je craignais, mais j'aurais bien voulus éviter le javascript.
Je continue à chercher, mais je vais surement me rabattre dessus.
Merci de ta réponse.

[fenrir0680]

Yep,

j'ai trouvé, c'est faisable en CSS3. Après mainte recherche sur google, j'ai trouvé ce site :

www.tomsyweb.com

qui renvoi sur celui-là :

hacks.mozilla.org

Pour faire simple, quand on a le code html suivant :

Code :

1
2
3
4
5
6
 
<div class="conteneur">
          <div class="element1">element 1</div>
          <div class="element2">element 2</div>
          <div class="element3">element 3</div>
</div>

on lui associe la feuille de style suivante :

Code :

1
2
3
4
5
6
7
8
9
 
.conteneur {
	-webkit-box-orient: vertical;
	display: -webkit-box;
}
.element2 {
	-webkit-box-flex: 1;
	-webkit-box-ordinal-group: 2;
}

on obtient l'affichage suivant :

Code :

1
2
3
4
5
6
 
<div class="conteneur">
          <div class="element1">element 1</div>
          <div class="element3">element 3</div>
          <div class="element2">element 2</div>
</div>

Le problème reste toujour le même, le manque de compatibilité avec les différents navigateurs.

En tout cas, Résolu!

[e-fitz]

Bonsoir,
une bonne nouvelle que tu es trouvé, en effet je ne pouvais pas t'aider je ne souhaite pas faire de css3 pour le moment ^^.

Bonne soirée