comment garder les deux div côte à côte si le second a un long texte

J'ai un div dans lequel il y a deux divs côté par côté. La largeur de la div extérieure et la largeur de l'intérieur de la gauche de la div sont fixes. J'utilise display:inline-block à montrer les deux divs côte à côte, mais si le texte dans le droit div est trop long, le droit div allons passer à la deuxième ligne. Comment pouvons-nous rendre le texte dans le droit div changements de ligne à l'intérieur de la div au lieu de faire de l'ensemble de la div se déplacer vers le bas?

<div style="width:300px"><div style="width:100px; display:inline-block; background-color:green">the first div</div><div style="display:inline-block; background-color:yellow">the second div with a long text, some more</div></div>

Merci pour votre aide.

InformationsquelleAutor CSSNewbie | 2011-03-21
  1. 3

    Utiliser des flotteurs, vous avez à donner à la fois des éléments d'une largeur fixe et flotter à gauche à l'eachother

    <div style="width:300px">
    <div style="width:100px; float:left; background-color:green">the first div</div>
    <div style="width:200px; float:left; background-color:yellow">the second div with a long text, some more</div>
</div>
    InformationsquelleAutor ChrisR
  2. 3

    Vous pourriez donner à la première <div> un float:left; propriété CSS et le second overflow:hidden;:

    <div style="width:300px"><div style="width:100px; float:left; background-color:green">the first div</div><div style="overflow:hidden; background-color:yellow">the second div with a long text, some more</div></div>
    InformationsquelleAutor Richard JP Le Guen
  3. 1

    Si la div extérieure, et la gauche plus à l'intérieur de la div à la fois pré-définis largeurs, puis par le processus de soustraction, le plus à droite div

    Si votre div extérieure est 300px et votre gauche div est 100px, alors serait-ce pas votre droit div être 200px?

    http://jsfiddle.net/Jaybles/FCXgp/

    ...j'ai loupé quelque chose?

    InformationsquelleAutor Dutchie432
  4. 0

    Vous pouvez également utiliser display:inline-block à la place de l'overflow:hidden

    InformationsquelleAutor Uri Lukach
  5. -1

    Vous avez flotter les deux divs, l'un à gauche et l'autre (plus de texte) à droite, et aussi que vous avez à donner à la droite div 200px de largeur. Heres est la démo live: http://jsfiddle.net/zVRWR/2/

    • Mise à JOUR: j'avais posté dans le mauvais lien. :S
    InformationsquelleAutor EmCo