Garder divs flottantes sur la même ligne

Comment puis-je garder deux éléments d'une même ligne fixe de la colonne de droite?
Je veux div être avec une taille fixe, et à gauche de la colonne de liquide, mais quand à insérer long texte à gauche, puis à droite, on passe à la colonne suivante..

Exemple: http://jsfiddle.net/Jbbxk/2/

Est-il un pur CSS solutions?

NB! Envelopper div doit avoir largeur dynamique!
Pour des fins de démonstration, il a fixé largeur, de sorte qu'il s'occupera de l'emballage.

Cheers!

  • Votre enveloppe a une largeur fixe. Qu'attendez-vous??? Ou ai-je raté quelque chose? Dépassement de capacité?
  • Mon gestionnaire de démonstration dispose de largeur fixe, mais dans mon applicatication est a largeur relative(50%). Une modification de la taille du conteneur
InformationsquelleAutor Kristian | 2012-07-12
  1. 10

    C'est une façon courante de faire ce que vous voulez:

    .wrap {
    position: relative;
    margin: 5px;
    border: 1px solid red;
}
.left {
    float: left;
    background-color: #CCC;
    margin-right: 48px;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background-color: #888;
}

    Explication:

    • La liquide de la colonne de gauche remplit toute la largeur mais permet d'économiser de l'espace pour la colonne de droite avec margin-right: [right column width];
    • La fixe de la colonne de droite est placé à une position absolue au top 0, droite 0 (sa place)
    • La envelopper div est attribué position: relative donc la bonne position de la colonne est déterminée selon elle.
    • C'est exctly ce que je cherche!
    InformationsquelleAutor pacha
  2. 7

    C'est en fait plus facile que je pensais, juste enlever le float:left; à partir de la gauche de la classe et de mettre votre droite les éléments flottants au-dessus d'eux dans le code HTML

    mise à jour de violon

    • Fonctionne comme un charme! Merci!
    • Sry, une meilleure solution par @pacha
    • C'est un très élégante solution. Toutefois, le contenu de la colonne de gauche (le liquide dans une) pourrait se retrouver sous la bonne quand la droite est plus courte en hauteur, qui peut ou peut ne pas être ce que vous voulez...
    InformationsquelleAutor Andrew Morris
  3. 1

    Ici est une autre solution. Ensemble display: table-cell;

    http://jsfiddle.net/Jbbxk/54/

    .left {
    /*display: left;*/
    display: table-cell;
}
.right {
    float: right;
    display: table-cell;
}

    Aussi, la div flottante vient en premier:

    <div class="right">
    &nbsp;
</div>
<div class="left">
    Looooooooong content - pushes right to next row<br>
    NOT OK
</div>
    InformationsquelleAutor Chloe
  4. 0

    Vous pouvez faire

    .left {
    max-width: 152px;
}
    • Je ne pense pas que ce sera le travail comme dans sa feuille de style, il est dit que la largeur de l'écharpe div est dynamique.
    • Oui, c'est pour la démonstration, en fait, dans mon application, elle est de 50%, de sorte que son évolution
    InformationsquelleAutor 32bitfloat
  5. 0

    que vous avez de la dynamique de la largeur, utilisez % comme 

    .left {
float: left;
background-color: #CCC;
width:75%;
}

    J'ai mis à jour le violon lien : http://jsfiddle.net/Jbbxk/6/

    • Nice, vous understanded ce que je veux, mais de cette façon, lorsque l'envelopper div est 500px il y a beaucoup d'espace blanc entre les divs
    InformationsquelleAutor Yasser