html - 使 img 高度适合表格的第二个单元格，该单元格具有动态高度

Question

第一个单元格包含一个图像，具有 100% 的宽度和动态高度。 我在第二个单元格中有微缩模型，每个微缩模型都应该获得第二个单元格动态高度的 33%。

<div style="display: table; width: 50%; height: auto;">
  <div style="display: table-cell; background: red; width: 70%;">
      <img src="IMG_15052014_112112.png" style="width: 100%;">
  </div>        
  <div style="display: table-cell; background: blue; width: 30%;">
    <img src="IMG_15052014_112112.png" style="height: 33%;">
    <img src="IMG_15052014_112112.png" style="height: 33%;">
    <img src="IMG_15052014_112112.png" style="height: 33%;">        
  </div>
</div>

我该怎么做？

Answer 1

如果您使用表格，那么您可以垂直跨越表格行

<table>
   <tr>
       <td rowspan="3"><img src="IMG_15052014_112112.png" alt="" /></td>
       <td><img src="IMG_15052014_112112.png" alt="" /></td>
   </tr>
   <tr>
       <td><img src="IMG_15052014_112112.png" alt="" /></td>
   </tr>
   <tr>
       <td><img src="IMG_15052014_112112.png" alt="" /></td>
   </tr>
</table>