列出项目或表格？

Question

我正在创建两列。第一列是一张图片，第二列是一个与点击图片的次数相关的数字（基本上）。所以我需要两个对齐，但我也希望图像彼此对齐以及数字彼此对齐。所以我的问题是最好在一个表格中执行此操作还是创建两个 div，将列表项放在每个 div 中，然后将它们彼此相邻浮动？

如果有更好的方法我是开放的。

选项 1

<div>
    <div style="float:left">
        <ul>
            <li><img></li>
            <li><img></li>
            <li><img></li>
        </ul>
    </div>
    <div style="float:left">
        <ul>
            <li><value></li>
            <li><value></li>
            <li><value></li>
        </ul>
    </div>
</div>

选项 2

<table>
    <tr>
       <td><img></td>
       <td><value></td>
    </tr>
    <tr>
       <td><img></td>
       <td><value></td>
    </tr>
    <tr>
       <td><img></td>
       <td><value></td>
    </tr>
</table>

我确信有更好的方法来做到这一点。我认为这两者都会起作用，但似乎应该有更好的东西。尤其是因为我将不得不使用一堆 CSS 来将它们全部排列起来并使其具有功能性。

最终结果： CSS

img{
float:left;
clear:left;
}

 span{
  clear:right;
  float:right;
}

HTML

<ul>
    <li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
    <li><img /><span>value</span></li>
</ul>

Answer 1

我会在同一个列表项中只保留一个包含图像和值的列表，即：

<li><img /><span>value</span></li>
<li><img /><span>value</span></li>
<li><img /><span>value</span></li>

这样，值将始终在图像旁边，并且可以直接使用跨度设置样式。

不应为此使用表格。如果上面的方法不合适，我可以给你写一些 jquery 来排列两个列表，但是使用上面的方法 imo 会更整洁。

Answer 2

使用表格。它更易于理解和维护。如果您的图像高度不同，则可以更轻松地垂直对齐项目。