Comment float deux éléments vers la droite en maintenant le même ordre visuellement et sémantiquement?

Comment float deux éléments à l'intérieur d'une enveloppe de l'élément vers la droite en gardant le même ordre des éléments visuellement et sémantiquement?

<style>
.container { widht: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

Lors du rendu, ce seront les éléments internes apparaissent dans l'ordre", Dit Simon", http://jsbin.com/eravan/1/edit.

OriginalL'auteur Gajus | 2013-01-26

  1. 12

    Vous pouvez également utiliser display: inline-block; au lieu de float pendant le réglage text-align: right; sur l'élément parent.

    http://jsbin.com/eravan/10/edit

    Qu'est-ce que la croix-prise en charge du navigateur avec gte IE6?
    Je sais ce que sont les conditions de commentaires. Quel est le lien entre moi?
    À l'aide de display: inline; display: inline-block serait la voie à suivre pour traiter avec IE<8. Vous aurez également besoin de lui donner un hasLayout la propriété: haslayout.net/haslayout
    Si vous me demandez pour le display inline-block support de ie6+, vous devez ajouter *display: inline; zoom: 1;
    Jusqu'à présent, cela semble la meilleure solution. Je ne peux pas penser à désactiver toutes les implications négatives.

    OriginalL'auteur miru87

  2. 4

    Les solutions courantes sont les suivantes:

    L'ajout d'auxiliaires élément

    <style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: left; margin: 0; }
.container .aux { float: right; }
</style>
<div class="container">
    <div class="aux">
        <p class="a">Simon</p>
        <p class="b">Says</p>
    </div>
</div>

    http://jsbin.com/eravan/6/edit

    Le problème avec cette approche est l'auxiliaire redondant élément lui-même.

    De jouer avec la sémantique

    <style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="b">Says</p>
    <p class="a">Simon</p>
</div>

    http://jsbin.com/eravan/9/edit

    C'est la pire des solutions et, malheureusement, la plupart des communes (Ali Bassam commentaire directement ci-dessous le prouve).

    N'est pas la bonne réponse.

    J'ai fait de s'opposer à votre expression : la pire des solutions. Cette solution n'est pas en contradiction avec les principes de flottant, la plupart des gens sont utilisés flottante gauche qui est plus facile et le HTML sera dans l'ordre, mais pourquoi est-il devenu un "pire des solutions" quand il s'agit de float:right ? "Avec la propriété CSS float, un élément peut être poussé vers la gauche ou la droite, permettant à d'autres éléments de s'enrouler autour d'elle." Et je suis sûr que nos chers interlocuteur du plan est beaucoup plus que ", Dit Simon", il n'est pas au sujet de fixation", Dit Simon", parce qu'il sait qu'il peut la mettre dans un div. C'est sur le float:right ordre de divs.
    CSS doit être utilisé pour des éléments de style et de ne pas changer le sens du contenu. De la même manière auxiliaire éléments HTML ne doit pas être ajoutée pour le style de but.

    OriginalL'auteur Gajus

  3. 1

    Il y a beaucoup de possibilités ici avec flexbox (y compris visuellement la réorganisation des éléments), de sorte que l'approche que vous prenez dépend de l'environnement de contenu. Toutefois IE ne prend pas en charge jusqu'à la version 10.

    http://caniuse.com/#feat=flexbox

    .container {
    width: 200px;
    height: 50px;
    background: #333;
    display: flex;
}

.container.a {
    justify-content: flex-end;
}

.container p {
    width: 50px;
    height: 50px;
    background: #f00;
    margin: 0;
}

.container.b .a {
    margin-left: auto;
}

<div class="container a">
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

<hr />

<div class="container b">
    <p class="c">Let's Play</p>
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

    http://jsfiddle.net/6NWmt/ (préfixes non inclus)

    Était juste ajouter cela à ma réponse. : ) Bon travail. Concernant IE10, au moment où il prend en charge les anciennes spécifications (à partir de 2009). Il y a un polyfill qui ajoute le support pour tous les navigateurs, github.com/doctyper/flexie. Malheureusement, il ne suivons aussi l'ancienne specs.
    Selon l'IE docs, ils suivent la spécification à partir de début 2012. Il est pratiquement identique à la version actuelle du projet (fin 2012) avec un peu de propriétés manquantes (flex-shrink, flex-grow, flex-base), quelques propriétés avec des noms différents (flex-pack vs justifier de contenu), et quelques valeurs avec des noms différents (fin vs flex-end). gist.github.com/4461470

    OriginalL'auteur cimmanon

  4. 0

    Une autre façon de faire pourrait être de rendre les deux classes absolu et spécifier leur emplacement? Si vos éléments sont de taille fixe, ce serait relativement simple. Juste une pensée..

    Théoriquement une option, mais ne serait pas upvote. Il y a trop d'implications négatives. Le plus grave est que, généralement, ce type de code est difficilement réutilisable, même au sein de la même mise en page. En outre, pensez aux gens qui le zoom dans le contenu et la mise en page responsive. Ignorant la réutilisabilité de l'implication, cela pourrait être une réponse pour un prototype ou d'une application (comme Facebook page application) page contenant les dimensions sont un peu connu pour ne pas changer.
    De bons points. Je n'avais pas pris en compte les dispositions fluides etc - juste pensé que c'est encore un autre angle d'attaque du problème.

    OriginalL'auteur Mat Richardson