CSS Tables, Inverser l'ordre d'affichage des contenus

Je sais c'est un peu bord de saignement, mais ici, c'est la question de toute façon:

Donné

<div id="one">First Div</div>
<div id="two">Second Div</div>

...

#one, #two { display: table-cell; }

... ce qui me donne une belle côte à côte arrangement de la div avec #un sur la gauche et #deux sur la droite.

Est de toute façon il put #deux sur la gauche et #un sur la droite, à l'aide de display: table-cell;, et sans modification de l'ordre des divs dans le code HTML?

Je demande, parce que je tiens à garder #un au-dessus de #deux dans le code HTML pour le RÉFÉRENCEMENT raisons, mais j'aimerais #deux pour être à la droite de #l'un pour des raisons esthétiques. Je sais comment le faire à l'aide de flotteurs/positionnement absolu/marges/etc., mais je me demandais si il y avait un moyen que je peux le faire à l'aide de la plus récente CSS table propriétés d'affichage (que je préfère).

Toutes les pensées?

Alors que de nouvelles fonctionnalités CSS sont sympa, je vous recommande d'utiliser un cross-browser compatible solution. float: right; sur le premier ou les deux éléments inverse l'horizontale afin de les intempéries tout en permettant à d'autres éléments d'être affectés par leur position, la largeur et la hauteur.
Je suis conscient de cela, mais pour ce site je peux me permettre de cibler plus agressivement les navigateurs les plus récents et d'employer de nouvelles technologies (HTML5 & CSS3). Je sais que les méthodes existantes pour faire cela; je cherchais à comprendre les méthodes plus récentes.

OriginalL'auteur neezer | 2009-07-16

  1. 49

    Vous pouvez (ab)utiliser le sens du texte avertissement, mal à l'avance:

    <div id="container">
    <div id="one">First Div</div>
    <div id="two">Second Div</div>
</div>

<style>
    #container { direction: rtl; }
    #one, #two { display: table-cell; direction: ltr;}
</style>
    Testé dans Chrome
    Solution intelligente =) Avez-vous testé de plus en plus de navigateurs? Vous pourriez courir à travers les browsershots.org
    Belle réponse. La solution facile.
    il essaie de garder l'affichage de la table de cellules à l'aide du flotteur obligerait à être bloquer
    6 ans plus tard, cela fonctionne encore comme un charme. Merci!

    OriginalL'auteur

  2. 1
        <div class="container">
        <div class="middle" style="background-color: blue;">
           <h4>Left Col placed middle</h4>
           <p>...</p>
        </div>
        <div class="right" style="background-color: red;">          
           <h4>Middle Col placed right side</h4>
           <p>...</p>
        </div>
        <div class="left" style="background-color: yellow;">
           <h4>Right Col placed left side</h4>
           <p>...</p>
        </div>
   </div>

<style type="text/css">
    .container {
        display: flex;
    }
    .container > .left{
        order:1;
    }
    .container > .middle{           
        order:2;
    }
    .container > .right{
        order:3;
    }

    .left, .middle, .right {
        display:table-cell;         
    }
 </style>

    - Je utiliser flexbox. Vous pouvez également modifier le comte de divs. Par exemple mettre plus de divs avec le bouton gauche de la classe, puis ils seront placés du côté gauche, même si elles sont déclarées après.

    J'ai essayé @Greg exemple, mais il ne fonctionne pas sur IE.

    OriginalL'auteur