Changer l'ordre des éléments du bloc avec CSS

Question

Changer l'ordre des éléments du bloc avec CSS

Demandé el 15 de Septembre, 2011: Quand la question a-t-elle été
10188 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cette question a déjà des réponses:

Utilisez CSS pour réorganiser les DIV (5 réponses )

Histoire courte

Disons que mon HTML est déjà fixé dans la pierre :

<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>

Cela ressemblera à ceci :

------------
| Block A  |
------------
| Block B  |
------------
| Block C  |
------------

Maintenant, je veux changer l'ordre des blocs. Comment puis-je le faire avec seulement CSS ?

------------
| Block C  |
------------
| Block A  |
------------
| Block B  |
------------

Je suis conscient qu'il existe des solutions de fortune comme l'utilisation de position:absolute mais cela ne préserve pas l'utilisation efficace de l'outil de gestion de l'information. display:block propriété. En d'autres termes, les blocs poussent les autres blocs vers le bas lorsqu'ils augmentent en taille.

Longue histoire

Lorsque l'utilisateur utilise un ordinateur pour consulter ma page Web, les blocs sont affichés dans cet ordre :

Informations générales.
Calendrier des événements.
Publicité pour les applications iPhone

La publicité pour l'application iPhone est placée en dernier car elle n'est pas très importante pour les utilisateurs d'ordinateurs. Un faible pourcentage d'utilisateurs d'ordinateurs sortiront leur téléphone et installeront l'application.

Si un utilisateur mobile vient sur ce site, l'annonce de l'application iPhone devrait être la chose la plus importante sur la page. Elle doit donc être déplacée en haut de la page :

Publicité pour les applications iPhone
Informations générales.
Calendrier des événements.

Je voudrais que les utilisateurs de l'iPhone et de l'ordinateur partagent le même code HTML, mais qu'une requête média CSS permette de changer l'ordre des blocs.

@media only screen and (max-device-width: 480px) {
   #blockC {
      /* magic order switching */
   }
}

Demandé el 15 de Septembre, 2011 par JoJo

0 votes

Pourquoi auriez-vous besoin de faire cela avec sólo CSS, si je peux me permettre ?

Commenté el 15 de Septembre, 2011 par Blender

1 votes

position: absolute ne change pas display: block .

Commenté el 15 de Septembre, 2011 par alex

0 votes

Y a-t-il une raison pour laquelle vous voulez faire cela en CSS et non en JavaScript ? Êtes-vous inquiet pour les utilisateurs dont le JavaScript est désactivé ?

Commenté el 15 de Septembre, 2011 par Ray Toal

Afficher 7 autres commentaires

Answer 1

5 Réponses

Answer 2

152voto

devnull Points 171

Voici un exemple "aussi simple que possible", pour changer l'ordre des éléments div (lors du redimensionnement de la fenêtre du navigateur) :

<!DOCTYPE html>
<html>
  <head>
    <title>foobar</title>
    <style>
      @media screen and (max-width:300px){
        #parent{
          display:flex;
          flex-flow: column;
        }
        #a{order:2;}
        #c{order:1;}
        #b{order:3;}
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="a">one</div>
      <div id="b">two</div>
      <div id="c">three</div>
    </div>
  </body>
</html>

Exemple : http://jsfiddle.net/devnull/qyroxexv/ (changez la largeur de la fenêtre pour voir l'effet du changement de l'ordre des divs)

Répondu el 1 de Août, 2014 par devnull (171 Points )

6 votes

C'est en fait assez magnifique... !

Commenté el 3 de Novembre, 2014 par Kablam

14 votes

Si vous déclarez #c { order: -1; } alors vous n'avez pas besoin de modifier l'ordre de l'option #a y #b .

Commenté el 31 de Mars, 2016 par 200_success

1 votes

Simple et beau

Commenté el 31 de Mars, 2016 par Jupo

Afficher 3 autres commentaires

Answer 3

124voto

thirtydot Points 114021

Comme cela a déjà été suggéré, Flexbox est la solution, notamment parce que vous n'avez besoin que de pour soutenir un seul navigateur moderne : Mobile Safari.

Voir : http://jsfiddle.net/thirtydot/hLUHL/

Vous pouvez retirer le -moz- si vous le souhaitez, je les ai simplement laissés pour les futurs lecteurs.

    #blockContainer {
        display: -webkit-box;
        display: -moz-box;
        display: box;

        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }
    #blockA {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;
    }
    #blockB {
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }

    <div id="blockContainer">
        <div id="blockA">Block A</div>
        <div id="blockB">Block B</div>
        <div id="blockC">Block C</div>
    </div>

Répondu el 15 de Septembre, 2011 par thirtydot (114021 Points )

13 votes

Espérons que le téléphone Windows 7, avec son IE flippant, ne sera jamais généralisé pour que nous puissions continuer à utiliser des CSS aussi cool.

Commenté el 17 de Septembre, 2011 par JoJo

0 votes

Brillant mais peut être très lent sur les pages complexes

Commenté el 11 de Février, 2013 par Christopher Tokar

0 votes

@thirtydot merveilleux ! Je n'ai jamais su cela merci beaucoup

Commenté el 4 de Mai, 2013 par Code Lover

Afficher 12 autres commentaires

Answer 4

39voto

Rubone Points 43

Je sais que c'est vieux, mais j'ai trouvé une solution plus facile et ça marche sur ie10, firefox et chrome :

<div id="wrapper">
  <div id="one">One</div>
  <div id="two">Two</div>
  <div id="three">Three</div>
</div>

C'est le css :

#wrapper {display:table;}
#one {display:table-footer-group;}
#three {display:table-header-group;}

Et le résultat :

"Three"
"Two"
"One"

Je l'ai trouvé aquí .

Répondu el 14 de Août, 2014 par Rubone (43 Points )

2 votes

Très utile pour l'utilisation d'une table !

Commenté el 17 de Février, 2015 par deebs

Answer 5

2voto

fceruti Points 1511

<div id="container">
    <div id="a">Block A</div>
    <div id="b">Block B</div>
    <div id="c">Block C</div>
</div>

disons que la hauteur d'un bloc est de 100px

#container     {position:relative; height: 300px;}
#a, #b, #c     {position:absolute; height: 100px}
#c             {top: 0px;}
#b             {top: 100px;}
#a             {top: 200px;}

Répondu el 15 de Septembre, 2011 par fceruti (1511 Points )

4 votes

Je ne veux pas coder en dur les hauteurs. Les éléments à l'intérieur sont dynamiques, donc la hauteur n'est pas connue.

Commenté el 15 de Septembre, 2011 par JoJo

Answer 6

2voto

Red Points 484

Vous pourriez essayer quelque chose de nouveau comme le CSS3 Flexbox . En combinant cela avec des requêtes média, vous devriez atteindre votre objectif.

Répondu el 15 de Septembre, 2011 par Red (484 Points )

Changer l'ordre des éléments du bloc avec CSS

Histoire courte

Longue histoire

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Changer l'ordre des éléments du bloc avec CSS

Histoire courte

Longue histoire

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: