如何在 <td> 中放置元素？

Question

我的产品的图片尺寸最大为 100 像素。表示：宽度为100px，高度小于100px，或者高度为100px，宽度小于100px。一侧始终为 100 像素。

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

我试过这个：

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

但这仅适用于 100 像素的高度。 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>