Question

我正在创建照片库的显示页面。该页面将具有4个照片属性-文件名，标题，拍摄日期和摄影师名称，以及照片本身的预览缩略图。我正在尝试实现一致的外观，但是不幸的是，图像以横向和纵向两种形式出现，因此尽管横向图像看起来一致，但纵向图像会拉长属性行之间的距离，从而使外观混乱。

我的示例代码在下面，JSFiddle上的代码位于此处-https://jsfiddle.net/tsmolskow/37hkszbq/61/

HTML代码：

<style>

.right-Padding{
   padding-right: 10px; 
}
img.resize {
   width: 50%;
   height: 50%;
   max-height: 125px;
}

</style>
<table style='font-size:15px'>

<tr><td font-size='40px'>Image Name</td>
<td rowspan='5'><a href='" + href + "'><img class='resize' align='middle' src='https://p1.liveauctioneers.com/3283/129454/65998802_1_x.jpg?version=1540061833&format=pjpg&auto=webp&quality=50'></a></td></tr>
<tr><td width='50%' class="right-Padding">Image Title</td></tr>
<tr><td>Image Date Taken</td></tr>
<tr><td class="right-Padding">Image Taken By</td></tr>
<tr><td height='100%'></td></tr>

<tr><td font-size='40px'>Image Name</td>
<td rowspan='6'><a href='" + href + "'><img class='resize' align='middle' src='https://i.pinimg.com/474x/09/f6/83/09f683f4fde5a1e70c785ad1dedca58b--silver-belt-buckles-silver-belts.jpg'></a></td></tr>
<tr><td width='50%' class="right-Padding">Image Tile</td></tr>
<tr><td>Image Date Taken</td></tr>
<tr><td class="right-Padding">Image Taken By</td></tr>
<tr><td height='100%'></td></tr>

</table>

CSS代码：

.right-Padding{
 padding-right: 10px; 
}
img.resize {
    width: 50%;
    height: 50%;
    max-height: 125px;
}

Answer 1

首先，您的第一张图片的行距为6，应为4。为图片设置最大高度，我将其设置为90px。然后从<td>单元格中删除25％的宽度和高度声明。最后，您必须使用表格吗？如果需要表格布局，则确实应该使用CSS Grid。

table{
   width:100%;
}
td{
   border:solid 1px #000;
}
img{
   max-height:90px;
   
}

<table style='font-size:15px'>
  <tr>
    <td font-size='40px'>
      <a href='" + href + "'>Image Name</a>
    </td>
    <td rowspan='4'>
      <a href='" + href + "'>
        <img  align='middle' src='https://p1.liveauctioneers.com/3283/129454/65998802_1_x.jpg?version=1540061833&format=pjpg&auto=webp&quality=50'>
      </a>
    </td>
  </tr>
  <tr>
    <td width='50%' style='padding-right: 10px;'>Image Tile</td>
  </tr>
  <tr>
    <td>Image Date Taken</td>
  </tr>
  <tr>
    <td style='padding-right: 10px;'>Image Taken By</td>
  </tr>
  <tr>
    <td font-size='40px'>
      <a href='" + href + "'>Image Name</a>
    </td>
<td rowspan='6'><a href='" + href + "'><img  align='middle' src='https://i.pinimg.com/474x/09/f6/83/09f683f4fde5a1e70c785ad1dedca58b--silver-belt-buckles-silver-belts.jpg'></a></td></tr>
<tr><td width='50%' style='padding-right: 10px;'>Image Tile</td></tr>
<tr><td>Image Date Taken</td></tr>
<tr><td style='padding-right: 10px;'>Image Taken By</td></tr>

</table>

行距图像高度可变，因此文本始终均匀

1 个答案: