0

私は CSS の使い方を知っており、Java を学んでいるので、回答にいずれかの言語が含まれている場合は、私が補うことができます。しかし、私はいつでもワンライナーを期待できます。:)

それが役立つ場合、すべての src 属性は画像に対して非常に似ています。

これは私が取り組んでいるプロジェクトの小さなサンプルです。上または各カードの名前の横に画像を効率的に表示する方法を探しています。

どんな助けでも大歓迎です

<table class="sentenceCase" id="mainTable"><tr class="notSentenceCase" id="title"><td colspan="10">Name censored Cube</td></tr>
    <tr class="notSentenceCase">
        <td class="description">bla bla bla irrelevant information</td>
    </tr>
    <tr class="rarityRow">
        <td class="empty" ></td>
        <td class="rarity-common" colspan="3">common</td>
        <td class="rarity-uncommon" colspan="3">uncommon</td>
        <td class="rarity-rare" colspan="3">rare</td>
    <tr> <!--White starts here-->
        <td class="colorName" rowspan="4">white</td>
        <td>porcelain legionnaire</td>  <td><img 
        src="http://www.wizards.com/global/images/magic/ZEN/cliff_threader.jpg"
        alt="Cliff Threader"
        border="0"
        height="200px"
        > 
        cliff threader </td>    <td class="lastInRow">marsh threader</td>
        <!--To expand, copy this row ^^ *Also do this in the next three blocks VV-->
        <td>suppression field</td>  <td>bathe in light</td> <td class="lastInRow">cloudgoat ranger</td>
        <td>gideon jura</td>    <td>eight-and-a-half tails</td> <td>tivadar of thorn</td>
    </tr>
    <tr>
        <td>purelace</td>   <td>trade caravan</td>  <td class="lastInRow">auramancer</td>
        <td>auriok bladewarden</td> <td>ivory giant</td>    <td class="lastInRow">crip swap</td>
        <td>parallax wave</td>  <td></td>   <td></td>
    </tr>
    <tr>
        <td>otherworldly journey</td>   <td>bonds of faith</td> <td class="lastInRow">avian changeling</td>
        <td></td>   <td></td>   <td class="lastInRow"></td>
        <td></td>   <td></td>   <td></td>
    </tr>
    <tr>
        <td></td>   <td></td>   <td class="lastInRow"></td>
        <td></td>   <td></td>   <td class="lastInRow"></td>
        <td></td>   <td></td>   <td></td>
    </tr> <!--White ends here-->
4

1 に答える 1

0

:beforeと:after 疑似要素を試しましたか？

td.card:after {
    content: url(image_url);
}

これらの疑似要素は、あなたの場合に非常に便利です。すべてのカードの横に画像を配置する必要はありません。card必要な にクラスを追加tdし、適切な CSS でスタイルを設定するだけです。

ここにそれについての素晴らしい記事があります

于 2013-10-23T07:01:25.690 に答える