Question

我的产品图片最大尺寸为100px。这意味着：宽度为100px，高度小于100px，或高度为100px，宽度小于100px。一方总是100px。

我需要在该图片的左下角的右侧，名称和价格上显示产品图片。它是我需要的不同情况下的结构：

enter image description here

我试过了：

<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等时，它应该改变。我怎样才能做到这一点？使用表格并不重要。您可以建议任何元素来执行此操作。

修改我又添加了一个<td>并将价格和名称放入第一个<td>，将图像放入第二个<td>。

现在我需要将<td>宽度设置为内部元素的大小。如果<td>中的图片宽度为90px，则将<td>宽度设置为90px。有可能吗？

Answer 1

如前所述，使用table不是你应该这样做的方式。但你可以使用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>

您可以在此处找到demo。

Answer 2

这就是我想出的。注意括在括号中的虚拟字段，更改它们以反映您的后端数据。

表格不合适，因为您的列可以具有不同的宽度。您的最后一个场景需要您检测图像的高度或提取它（假设您已将其保存在某处）并向项容器添加一个类。

<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>

如何放置元素？

2 个答案: