1

スライド ドア効果を使用して可変幅のコンテンツ ボックスを表示しています。効果は問題なく動作しますが、問題は、効果を作成するために必要なパディング ライトがコンテンツ領域の一部を占有することです。

http://screencast.com/t/s9dTT1wU

グラフィックの左端から右端までコンテンツが必要です。古い IE をサポートする必要があるため、負のマージンを使用できません。テキストだけでなく、内部に完全な HTML コンテンツが必要なため、text-indent も使用できません。CSS は次のとおりです。

.Quote.Outer
{
    float: left;
    background-image: url(/harmony/Common/Web/UI/Resources/Images/ValidationCalloutRight.png);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 50px;
    height: 81px;
}

.Quote.Inner
{
    background-image: url(/harmony/Common/Web/UI/Resources/Images/ValidationCalloutLeft.png);
    background-position: left center;
    background-repeat: no-repeat;
    height: 81px;
    outline: solid 1px hotpink;
}

マークアップは次のとおりです。

<div class="Quote Outer">

    <div class="Quote Inner">html content here</div>

</div>

スライドドアのこの欠点について誰も議論していないことに驚いた。これに対する合理的なクロスブラウザ ソリューションはありますか?

4

1 に答える 1

1

左のパディングを可能にするために、単に別のレイヤーが必要です。

デモはこちら

または、内側のdivにパディングを追加します。

デモはこちら

もう1つのオプションは、ポジショニングを使用して内側のコンテンツを少し右に移動し、パディングの外観を減らすことです。しかし、コンテンツコンテナを画像ベース全体に表示させようとはしません。これにより、引き戸のポイントであるサイズ変更の問題が発生します。

デモはこちら

いつでも画像を編集して、50ピクセルのパディングを減らすことができます。

于 2012-02-10T20:53:48.587 に答える