如何在​​中放置元素？

Question

我有最大100px图像的产品。这意味着：宽度是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等时，它应该改变。 我该怎么做？使用表格并不重要。你可以建议任何元素来做到这一点。

编辑： 我加并排一个更<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。

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>