html - 如何在 <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>

但这只适用于 100px 高度。 margin-top: 15%;是静态的。当图像高度为 50px、60px 等时，它应该改变。 我怎样才能做到这一点？使用表格并不重要。您可以建议任何元素执行此操作。

编辑: 我又加了一个<td>并排并将价格和名称放在第一位<td>和图像成第二<td> .

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

Answer 1

如前所述，使用表格不是您应该采用的方式。但是你可以使用 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在这里。