CSS：你如何將這個div保持在浮動的權利？

在我的代碼下面，情況＃1工作正常。「諮詢區」div位於「評級框」的右側。CSS：你如何將這個div保持在浮動的權利？

但是，案例＃2在文本超出一行時不起作用。這會導致「advice-area」div移到「rating-box」下方

解決此問題的最佳方法是什麼？謝謝。

<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>

來源

2010-09-15 JMan

我會限制爲.advice-content或.advice-area股利（或任何DIV是圍繞你浮內容）的寬度。

當您將文本輸入到浮動div中時，div會相應地自動調整其寬度，如果它擴大得太寬，它會自動換行到下一行。想想如何包裝文字中的單詞。

所以，你所需要做的就是限制那個特定div的寬度，並且它永遠不會擴展到足以包裝到下一行。

除非如果你在IE瀏覽器：在這種情況下，它會做什麼是地獄就是了;）

來源

2010-09-15 17:33:30 digitaldreamer

浮動元素，而不是內聯塊，可能是你在這種情況下想要的東西。我通過在代碼中將div移到高於/低於div的位置，然後將它們都浮動到左邊，從而設法得到看起來有用的結果。然後我調整了邊距，直到間距看起來不錯。

CSS變化：

.number { 
    float: left; 
} 

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

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

HTML變化：

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

來源

2010-09-15 17:37:19

限制在.advice內容的寬度，它會告訴你如何想它。

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

在IE7 & 8 /火狐/歌劇/鉻/ Safari瀏覽器

爲我工作

來源

2010-09-15 18:10:11 NewB

CSS：你如何將這個div保持在浮動的權利？

回答

相關問題