0

次のhtmlはアイテム情報を示しています。評価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

style="float:left;"評価divとアビリエーションに追加しspanます。float:left;（さらに良い：これらの要素のCSSファイルに追加します）。

次に、<br clear="all" />評価の前と評価divの後に置き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 に答える