CSS: Comment gardez-vous cette Div à la droite d'un flotteur?

Dans mon code ci-dessous, le cas # 1 fonctionne correctement. La div "conseil-zone" reste à droite de la "zone de classement". Cependant, le cas n ° 2 ne fonctionne pas lorsque le texte s'étend au-delà d'une ligne. Cela entraîne le déplacement de la div "advice-area" en dessous de la "rating-box"CSS: Comment gardez-vous cette Div à la droite d'un flotteur?

Quelle est la meilleure façon de résoudre ce problème? Merci.

<html> 
<head> 
    <style type="text/css"> 
    .wrapper { 
     width: 400px; 
     list-style: none; 
    } 
    .row { 
     border-bottom: 1px solid #E5E5E5; 
     padding: 15px 0; 
     font-size: 14px; 
     clear: both; 
    } 
    .rating-box { 
     float: left; 
     height: 70px; 
     position: relative; 
     width: 60px; 
    } 
    .thumbs { 
     float: right; 
     width: 20px; 
    } 
    .number { 
     position: absolute; 
     top: 16px; 
     left: 5px; 
    } 
    .advice-area { 
     display: inline-block; 
     margin-left: 35px; 
    } 
    .advice-content { 
     font-size: 16px; 
     margin: 0 0 10px 0; 
    } 
    .advice-action { 
     display: inline-block; 
    } 
    .add-box { 
     display: inline; 
     margin-left: 30px; 
    } 
    .add-box a { 
     display: inline-block; 
    } 
    .share-button { 
     display: inline; 
     margin-left: 30px; 
     cursor: pointer; 
    } 
    .flag { 
     display: inline; 
     margin-left: 30px; 
     cursor: pointer; 
    } 
    </style> 
</head> 

<body> 
    <ul class="wrapper"> 
     <li class="row"> 
      <div class="rating-box"> 
       <div class="thumbs"> 
        <div> Up </div> 
        <div> Down </div> 
       </div> 
       <div class="number">1</div> 
      </div> 
      <div class="advice-area"> 
       <div class="advice-content">Case #1: This is correct</div> 
       <div class="advice-action"> 
        <div class="add-box"><a href="#">Plan</a></div> 
        <div class="share-button"><a href="#"> Share </a> </div> 
        <div class="flag"> <a href="#">Flag</a> </div> 
       </div> 
      </div> 
     </li> 
     <li class="row"> 
      <div class="rating-box"> 
       <div class="thumbs"> 
        <div> Up </div> 
        <div> Down </div> 
       </div> 
       <div class="number">2</div> 
      </div> 
      <div class="advice-area"> 
       <div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div> 
       <div class="advice-action"> 
        <div class="add-box"><a href="#">Plan</a></div> 
        <div class="share-button"><a href="#"> Share </a> </div> 
        <div class="flag"> <a href="#">Flag</a> </div> 
       </div> 
      </div> 
     </li> 
    </ul> 
</body>

Source

2010-09-15 JMan

Je restreins la largeur pour les .advice-content ou .advice-area div (ou quoi que div est autour du contenu que vous êtes flottant).

Lorsque vous entrez du texte dans un div flottant, le div dimensionnera automatiquement sa largeur en conséquence, et s'il s'étend trop, il passera automatiquement à la ligne suivante. Pensez à comment l'emballage fonctionne pour les mots dans le texte. Donc, tout ce que vous devez faire est de restreindre la largeur de ce div particulier, et il ne deviendra jamais assez large pour passer à la ligne suivante.

À moins si vous êtes dans IE: dans ce cas, il fera tout ce que l'enfer qu'il veut;)

Source

2010-09-15 17:33:30 digitaldreamer

éléments flottants, plutôt que des blocs inline, sont probablement ce que vous voulez dans cette situation. J'ai réussi à obtenir ce qui semble être un résultat utile en déplaçant le numéro div au-dessus du code haut/bas div, puis en flottant tous les deux vers la gauche. J'ai ensuite ajusté les marges jusqu'à ce que l'espacement semble décent.

changements CSS:

.number { 
    float: left; 
} 

.thumbs { 
    float: left; 
    width: 20px; 
    margin-left: 20px; 
} 

.advice-area { 
    margin-left: 80px; 
}

changements HTML:

<div class="rating-box"> 
    <div class="number">1</div> 
    <div class="thumbs"> 
     <div> Up </div> 
     <div> Down </div> 
    </div> 
</div>

Source

2010-09-15 17:37:19

limiter la largeur sur .advice contenu et il montrera comment vous le souhaitez.

.advice-content { 
    font-size: 16px; 
    margin: 0 0 10px 0; 
    width:300px; 
}

travaillé pour moi dans IE7 & 8/Firefox/Opera/Chrome/Safari

Source

2010-09-15 18:10:11 NewB

CSS: Comment gardez-vous cette Div à la droite d'un flotteur?

Répondre

Questions connexes