0

以下 html 显示了一个项目信息。我正在尝试将 avaliation 跨度放在评级 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;
        }
4

3 回答 3

2

Add style="float:left;" to the rating div and the aviliations span. (Better yet: add float:left; to the CSS file for these elements).

Then, put <br clear="all" /> before the rating div and after the avaliations span.

于 2012-05-21T18:36:58.957 回答
1

只需添加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/

于 2012-05-21T18:32:22.237 回答
1

尝试更改 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>
于 2012-05-21T18:33:39.447 回答