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保持在浮动的权利？

回答

相关问题