1

ページの下部に全幅の矢印があるページを作成する必要があります。したがって、次の HTML を使用します。

<div id="footer_wrap">
    <div id="footer_left"></div>
    <div id="footer_right"></div>
</div>

関連する CSS は次のとおりです。

#footer_wrap{
width: 100%;
}

#footer_left{
background: url('../img/arrow_bg1.png') repeat-x;
width: 100%;
height: 183px;
position: absolute;
left: 0;
}

#footer_right{
display: inline-block;
background: url('../img/arrow_bg2.png') no-repeat;
width: 250px;
height: 183px;
position: absolute;
right: 0;
}

理論的には、これは機能するはずです。実際、背景色が固定された画像を使用した場合は機能しました。しかし、私のクライアントはそれらが透明であることを要求しました。残念ながら、私のハックの背後にある醜い真実が明らかになりました.矢の「シャフト」が矢の頭から覗いています. 私はそれについて何ができますか？

矢印を構成する画像は 1x183px の「シャフト」テクスチャで、矢印の全長 (この場合はページ全体[width: 100%]) で繰り返され、矢印の頭は 250x183px の長方形です。

矢印はページ全体を占める必要があり、透明な画像を使用する必要があるため、これらのソリューションはすぐにウィンドウから外れます. width: 100%-250pxのようなものは受け入れられると思いますが、これらのシェナニガンは CSS ではサポートされていません。

4

2 に答える 2

6

あなたはすでに position:absolute; を使用しています。の代わりに、次のように設定width:100%できます。leftright

#footer_left{
position: absolute;
left: 0;
right:250px;
/* etc */
}

他にも多くの回避策がありますが、特定のケースでは、それが最も簡単だと思います。

于 2012-10-30T10:17:29.013 に答える
0

この方法がうまくいくと思います：http://jsfiddle.net/27p4e/

<div class="footer">
 <div class="footer-left">left</div>
 <div class="footer-right">right</div>
</div>

.footer {
width:100%;
height:183px;
overflow:auto;
background:#ccc;
display:table;
}

.footer-left {
display:table-cell;
background:red;
height:183px;
}
.footer-right {
display:table-cell;
width:250px;
height:183px;
background:blue;
}
于 2012-10-30T10:21:20.573 に答える