html - 如何放置元素？

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>并排添加了一个，并将价格和名称放入 first<td>并将 image 放入 second <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>

你可以在这里找到一个演示。

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>