0

最大 100 ピクセルのサイズの画像を含む製品があります。つまり、幅が 100px、高さが 100px 未満、または高さが 100px、幅が 100px 未満です。片面は常に 100px です。

商品画像を右側に、名前と価格をその画像の左下に表示する必要があります。私が必要とするのは、さまざまな場合の構造です。

ここに画像の説明を入力

私はこれを試しました：

<table style="width: 100%;">
    <tbody>
        <tr>
          <td style="height: 100px; ">
              <a href="@Url.Action("Details", "Product", new { id = Model.Id })" > 
                 <img src="@Url.Content("~/Images/" + Model.Image)" style="float:right;" alt="" />
                <b style="margin-top: 15%; float: right;">
                    <label>@Model.Price</label>
                    <br />
                    <label>@Model.Name</label>
                </b>
              </a>
          </td>
       </tr>
    </tbody>
</table>

ただし、これは高さ 100px でのみ機能します。margin-top: 15%;静的です。画像の高さが 50px、60px などの場合は変更する必要があります。これどうやってするの？テーブルを使用することは重要ではありません。これを行うように要素にアドバイスできます。

編集: もう1つ<td>並べて追加し、価格と名前を最初<td>に、画像を2番目に入れまし<td>た。

<td>ここで、内側の要素のサイズのように幅を設定する必要があります。画像の幅<td>が 90px の場合、幅を 90px に設定<td>します。出来ますか？

4

2 に答える 2

2

すでに述べたように、テーブルを使用することは、あなたがすべき方法ではありません。ただし、CSS を使用してテーブルのようなものをシミュレートできますが、これは ie7 以下では機能しないことに注意してください。

CSS

.list li {
    height:100px;
    border:5px solid #000;
    margin-bottom:5px;
    width:100%;
    display:table;

}

.list li div {
    display:table-cell;
    vertical-align:middle;
    overflow:hidden;
}

.list li div a {
    display:table;
    width:100%;
}
.list li a span {
    display:table-cell;
    overflow:hidden;
    width:100%;
    vertical-align:bottom;
}

.list li a span b {
    display:block;
    padding-right:5px;
    float:right;
}

.list img {
    float:right;
}

HTML

<ul class="list">
    <li>
        <div>
            <a href="#" > 
                <span>
                    <b>@Model.Pricexyz<br />@Model.Name</b>
                </span>
                <img src="http://placekitten.com/g/100/100" alt="" />
            </a>
        </div>
    </li>
    <!-- add other elements here -->
</ul>

ここでデモを見つけることができます。

于 2013-02-16T16:20:08.317 に答える
1

これが私が思いついたものです。括弧で囲まれたダミー フィールドに注意してください。バックエンド データを反映するように変更してください。

列の幅が異なる可能性があるため、テーブルは適切ではありません。最後のシナリオでは、画像の高さを検出するか、それを抽出し (どこかに保存したと仮定)、アイテム コンテナーにクラスを追加する必要があります。

<style type="text/css">

    .products-container > .item {
        height: 100px;
    }

    .products-container > .item.image-height-60 {
        padding: 20px 0;
        height: 80px;
    }

    .products-container > .item > .column {
        float: right;
        height: 100px;
    }

    .products-container > .item > .column.info-column {
        position: relative;
    }

    .products-container > .item > .column.info-column > .inner {
        position: absolute;

        bottom: 0;
        right: 0;
    }

    .products-container img {
        /* dummy image dimensions */
        /*width: 60px;
        height: 100px;*/

        vertical-align: bottom;
    }

    .products-container .clear {
        clear: both;
    }
</style>

<div class="products-container">
    <div class="item">

        <!-- Image column comes first because it's pushed to the right using float: right -->
        <div class="column image-column">
            <a href="[link]" > 
                 <img src="[image_src]" alt="Image for [name]" />
            </a>
        </div>

        <div class="column info-column">
            <div class="inner">
                <span>[price]</span> <br />
                <span><a href="[link]">[name]</a></span>
            </div>
        </div>

        <div class="clear"></div>

    </div>

    <!-- Example where image is assumed to be 60 pixels tall. -->
    <!-- Notice I've added the class 'image-height-60' -->
    <div class="item image-height-60">

        <div class="column image-column">
            <a href="[link]" > 
                 <img src="[image_src]" alt="Image for [name]" />
            </a>
        </div>

        <div class="column info-column">
            <div class="inner">
                <span>[price]</span> <br />
                <span><a href="[link]">[name]</a></span>
            </div>
        </div>

        <div class="clear"></div>

    </div>
</div>
于 2013-02-16T15:32:42.020 に答える