使用CSS / Javascript / JQuery间隔表格单元格

时间:2011-04-03 23:03:31

标签: javascript jquery html css

我要做的是有一个网格布局 - 你可以编辑你想要的行/列数,这部分在大多数情况下工作正常。但无论我做什么,我似乎都无法让单个细胞正确地进入太空。最初我把它作为一个表构建 - 但被告知div可能表现得像一张桌子,并且认为它们更容易操纵CSS但无济于事。

我遇到的问题是尝试更改单元格的宽度/填充/边距/等以创建间距,通常会扭曲缩略图的高度/宽度。

我遇到的另一个问题是行之间的间距似乎随机地随机增加了高度 -

有没有更好的方法来解决我正在尝试做的事情 - 某种简单的可自定义网格布局或者如何才能使间距成为我想要的方式?

背景 - 仍然试图建立一个基于jQuery / Javascript的可自定义图像库,这样我就可以创建一个数据库来上传图像,因为我找不到任何我喜欢的东西,如果您感兴趣的话,这就是我目前所拥有的:{{ 3}}

1 个答案:

答案 0 :(得分:0)

HTML:

<table>
    <tr>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
    </tr>
    <tr>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
        <td> <img src="http://placekitten.com/60/100"> </td>
    </tr>
</table>

CSS:

td { padding:6px; }
img { border:3px solid white; display:block; }

现场演示: http://jsfiddle.net/simevidas/Rmj3w/