Question

在我的下面的代码中，案例＃1正常工作。 “建议区”div位于“评级框”的右侧。

但是，当文本超出一行时，情况＃2不起作用。这导致“建议区域”div移动到“评级框”

之下

解决此问题的最佳方法是什么？感谢。

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

Answer 1

我会限制.advice-content或.advice-area div的宽度（或任何div围绕您正在浮动的内容）。

当您在浮动div中输入文本时，div会相应地自动调整其宽度，如果它扩展得太宽，它将自动换行到下一行。想想包装如何在文本中对单词起作用。

所以，你需要做的就是限制特定div的宽度，并且它永远不会变得足够宽以包裹到下一行。

除非你在IE中：在这种情况下，它会做任何想做的事情;）

Answer 2

在这种情况下，您可能需要浮动元素而不是内联块。通过在代码中将数字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>

Answer 3

限制.advice-content的宽度，它会显示你想要的方式。

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

在IE7＆amp; 8 / Firefox / Opera / Chrome / Safari

CSS：你如何将这个Div保持在浮动的右侧？

3 个答案: