jQuery：图像在 HTML 表中的位置

Question

假设我有一张桌子：

  <table id="table1" border="1">
    <tr>
      <td id='id1'  style="width:200px"></td>
      <td id='id2'  style="width:200px">2222</td> 
    </tr>

  </table>

我正在使用以下代码将图像添加到这些表格单元格中

$('#id1').append('<img src=images/image1.jpg />');
$('#id1').append('<img src=images/image2.jpg />');
$('#id1').append('<img src=images/image3.jpg />');

$('#id2').append('<img src=images/image4.jpg />');

现在我想要实现的是：
1. 对于单元格“id2”，我希望图像始终向右对齐，因此它不在文本旁边。
2. 对于单元格“id1”，由于这 3 个图像具有不同的尺寸（24x24、32x32、24x24），我不希望它们彼此相邻。我想要的是，好像那个单元格中有3个小单元格，每个大小为32x32，并将这些图像一一放入这些小单元格中。

我不擅长 html 或 javascript。有可能吗？

Answer 1

根据第 2 项，我想说您还没有完成对表的定义。您需要在#id2 中添加一个嵌套表（这种方法的优点可以稍后讨论）。

所以你的桌子是

<table>
    <tr>
        <td id="id1"></td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td id="id1a"></td>
                    <td id="id1b"></td>
                    <td id="id1c"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

从那里您可以将图像附加到子单元格中。

Answer 2

CSS

#id2 img { float: right; }

HTML

    <table id="table1" border="1">
    <tr>
      <td id='id1'  style="width:200px"><table><tr></tr></table></td>
      <td id='id2'  style="width:200px">2222</td> 
    </tr>
  </table>

Javascript

$('#id1').find('tr').append('<td><img src=images/image1.jpg /></td>');
...