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

使用表格。理解和维护更简单。如果图像具有不同的高度，则可以更容易地垂直对齐项目。

列出项目或表格？

2 个答案: