Question

以下html显示了商品信息。我正在尝试将评级div放在评级div的右侧。如果我将评级浮动到左侧，它将转到另一个跨度的顶部。我确定这是一个很容易解决的问题，但我尝试了很多但没有找到避免脏代码的解决方案。

                <div>
                    <h1>name</h1>
                    <span>omg: <a href="#">omg</a></span>
                    <div class="rating">
                        <span class="stars-2">
                            <img src="stars.png" width="86" height="91" title="4 star rating" alt="4 star rating" />
                        </span>
                    </div>
                    <span>x avaliations</span>
                </div>

评级CSS：

        div.rating {
            position: relative;
            width: 84px;
            height: 14px;
            overflow: hidden;
        }

        div.rating span {
            position: absolute;
            left: -1px;
        }

        div.rating span.stars-0 {
            top: -1px;
        }

        div.rating span.stars-1 {
            top: -16px;
        }

        div.rating span.stars-2 {
            top: -31px;
        }

        div.rating span.stars-3 {
            top: -46px;
        }

        div.rating span.stars-4 {
            top: -61px;
        }

        div.rating span.stars-5 {
            top: -76px;
        }

Answer 1

将style="float:left;"添加到评分div和评论span。（更好的是：将float:left;添加到CSS文件中以获取这些元素。）

然后，将<br clear="all" />放在评级div之前和评分之后span。

Answer 2

只需将display:inline添加到评分div

即可

    div.rating {
        position: relative;
        display:inline; /* add this */
        width: 84px;
        height: 14px;
        overflow: hidden;
    }

此处+更多样式以使其适合http://jsfiddle.net/j5mxZ/ - 无需样式编辑http://jsfiddle.net/j5mxZ/1/

Answer 3

尝试更改HTML中的跨度顺序：

<div>
    <h1>name</h1>
    <span>omg: <a href="#">omg</a></span>
    <span>x avaliations</span>
    <div class="rating">
        <span class="stars-2">
            <img src="stars.png" width="86" height="91" title="4 star rating" alt="4 star rating" />
       </span>
    </div>
</div>

在div右侧定位span元素

3 个答案: