0

バージが使用する評価ボックスの基本的な効果を再現しようとしています (ここで確認できます: http://www.theverge.com/2012/5/9/3002183/airplay-speaker-review-iphone at一番下）しかし、テキストの配置に問題があり続けています。今私はこれを持っています：

            <div class="product-score-box">
                <div class="score"> 
                    <span class="totalscore">
                        <?php echo aff_the_rating();?>
                    </span>
                    <span class="ourscore">Our Score</span> 
                </div>
                <a href="#" class="product-score-cta">Leave Review</a>
            </div>

CSS: 

            .product-score-cta { right:0; left: 0; bottom:5px; color:white;}
            .ourscore {bottom:8px;}
            .totalscore {top:10px; font-size:70px; line-height:70px;}
            .ourscore,.totalscore,.product-score-cta {position:absolute;  }
            .score {
                height:115px;
                color:white;
                background:#f48b1b;
                position:relative;
                }

            .product-score-box {
                display: block;
                position: absolute;
                top:20px;
                right:10px;
                color: white;
                font-family: 'DINCond-MediumRegular';
                background: black;
                text-align: center;
                z-index: 20;
                overflow: hidden;
                font-size: 16px;
                line-height: 100%;
                width:130px;
                height:140px;
                }

Firefox では .score のテキストが中央に配置されず、Chrome では奇妙に配置されます (正当化されているかのように)。絶対的なポジショニングは絶対に苦手です！誰かが私が同様の効果を得るのを手伝ってくれたら、私は永遠に感謝します.

編集: http://jsfiddle.net/wQrZr/

4

2 に答える 2

1

したがって、マークアップと標準フォントの選択を考慮して可能な範囲で複製しましたが、レイアウトは正しいはずです。

ボックス内の要素に絶対的な幅を設定し、それらをleft: 0;まっすぐに実行するように見せ、レビューを残す要素に追加のスタイルを追加することで、境界線に近づけました。

CSS:

* { font-family: Tahoma; }   

.product-score-cta { right:0; left: 0; bottom:5px; font-size: 14px; text-decoration: none; color: #EEE;}
            .ourscore {bottom:12px; font-size: 18px; font-style: italic;}
            .totalscore {top:10px; font-size:70px; line-height:70px;width:130px; position: absolute;}
            .ourscore,.totalscore,.product-score-cta {position:absolute; width: 130px; left: 0px;}
        .score {
            height:115px;
            color:white;
            background:#f48b1b;
            position:relative;
            }

        .product-score-box {
            display: block;
            position: absolute;
            top:20px;
            right:10px;
            color: white;
            font-family: 'DINCond-MediumRegular';
            background: black;
            text-align: center;
            z-index: 20;
            overflow: hidden;
            font-size: 16px;
            line-height: 100%;
            width:130px;
            height:140px;
            }   ​

参照：

于 2012-05-11T01:46:57.480 に答える
0

1) .totalscore と .ourscore の絶対配置を削除する 2) スコアを相対的に配置する 3) 「ourscore」ラベルを絶対的に配置する

ここにあります： http://jsfiddle.net/hammerbrostime/PGKNU/

于 2012-05-11T01:46:33.523 に答える