1

css を使用して次のことを実現する方法 (ヘッダー行と重なる背景画像の背景色): ここに画像の説明を入力

これは、表の TH セルの部分です。TH 行は #0098da の色で、TH セルの最後は画像になります (画像の URL はhttp://tax.allfaces.lv/templates/tax/images/pg_arrow.pngです)。

TH で bg 画像を使用して div を配置しようとしましたが、画像が TH の境界線に重なるという問題がありました。そして結果として、私はfollowignを得ました：

ここに画像の説明を入力

HTML:

    <table id="duration-of-refund" border="0">
    <tbody>
        <tr>
            <th>
                <p>Purchases in Webshops</p>
                <div class="img-at">&nbsp;</div>
            </th>
            <th>
                <p>Currency conversion, Refund transfer</p>
                <div class="img-arrow">&nbsp;</div>
            </th>
        </tr>
        <tr>
            <td>
                <p>Some text here Some text here Some text here Some text here Some text here</p>
            </td>
            <td>
                <p>Some text here Some text here Some text here Some text here Some text here</p>
            </td>
        </tr>
    </tbody>
</table>

CSS:

    #duration-of-refund td {
     width: 400px;
 }
 #duration-of-refund th {
     font-size: 21px;
     color: white;
     text-align: left;
     height: 84px;
     max-height: 84px;
 }
 #duration-of-refund tr th:nth-child(1) {
     background-color: #0098da;
 }
 #duration-of-refund tr th:nth-child(2) {
     background-color: #1F5CA9;
 }
 #duration-of-refund tr th:nth-child(1) p, #duration-of-refund tr th:nth-child(2) p {
     width: 190px;
     float: left;
 }
 .img-at, .img-arrow {
     width: 83px;
     height: 84px;
     float: right;
     margin-right: 20px;
     position: relative;
     top: -20px;
 }
 .img-arrow {
     background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_arrow.png);
 }
 .img-at {
     background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_at.png);
 }
 #duration-of-refund tr td:nth-child(2) {
     background-color: #cceaf8;
 }
}

JSfiddle の例: http://jsfiddle.net/rAVqx/

これを行う別の方法があるはずだと思います。

これを達成する方法の手がかりを教えてください。画像が異なる他の TH 細胞も同じように配置します。

4

1 に答える 1

0

これを試して、画像クラスタグを別のdivに配置し、スタイルを次のように適用します

 float:right;margin-right:90px

絶対位置としての画像位置

 position: absolute;

あなたのコードは変更されたばかりです

HTML

<table id="duration-of-refund" border="0">
    <tbody>
        <tr>
            <th>
                <p>Purchases in Webshops</p>
                <div style="float:right;margin-right:90px;">
                <div class="img-at">&nbsp;</div>
                </div>
            </th>
            <th>
                <p>Currency conversion, Refund transfer</p>
                <div style="float:right;margin-right:90px;">
                <div class="img-arrow">&nbsp;</div>
                </div>
            </th>
        </tr>
        <tr>
            <td>
                <p>Some text here Some text here Some text here Some text here Some text here</p>
            </td>
            <td>
                <p>Some text here Some text here Some text here Some text here Some text here</p>
            </td>
        </tr>
    </tbody>
</table>

CSS:

#duration-of-refund td {
     width: 400px;
 }
 #duration-of-refund th {
     font-size: 21px;
     color: white;
     text-align: left;
     height: 84px;
     max-height: 84px;
 }
 #duration-of-refund tr th:nth-child(1) {
     background-color: #0098da;
 }
 #duration-of-refund tr th:nth-child(2) {
     background-color: #1F5CA9;
 }
 #duration-of-refund tr th:nth-child(1) p, #duration-of-refund tr th:nth-child(2) p {
     width: 190px;
     float: left;
 }
 .img-at, .img-arrow {
     width: 83px;
     height: 84px;
     float: right;
     margin-right: 20px;
     position: absolute;
     top: -20px;
 }
 .img-arrow {
     background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_arrow.png);
 }
 .img-at {
     background-image: url(http://tax.allfaces.lv/templates/tax/images/pg_at.png);
 }
 #duration-of-refund tr td:nth-child(2) {
     background-color: #cceaf8;
 }
}
于 2013-06-10T08:27:28.763 に答える