如何将此表格布局更改为 CSS 布局？答案

【问题标题】：How to change this table layout to a css layout?如何将此表格布局更改为 CSS 布局？
【发布时间】：2010-11-26 02:22:28
【问题描述】：

我创建了一个没有边距、内边距或边框的skinny CSS 类：

.skinny
{
    margin:0 0 0 0;
    padding:0 0 0 0;
    border:0 0 0 0;
}

我将它应用于包含图像的行，该图像也应用了skinny 类：

<td width="33%" align="center" class="skinny">
    <table width="400px" height="180px" class="skinny">
        <tr class="skinny">
            <td class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></td>
            <td class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></td>
        </tr>
    </table>
</td>

我试图让图像尽可能靠近下一个单元格中的<h1> 文本，以便它们从左到右相互推挤。

但无论我将skinny 类应用于多少个元素，似乎每个表格单元格周围都有类似“填充”的东西，在图像和文本之间创建了一个空间。

我需要做什么才能使这个 CSS 布局将图像直接放在文本的左侧，并且它们之间没有空格？

我试过了：

<td width="33%" align="center" class="skinny">
    <div class="skinny" width="60px" height="100px"><a class="skinny" href="/"><img class="skinny" width="60px" height="100px" id="snapshot" src="/images/snapshot.png"></a></div>
    <div class="skinny" width="120px" height="100px"><a class="skinny" href="/"><h1 class="skinny">Product</h1></a></div>
</td>

但它会将图像置于文本之上。

【问题讨论】：

你不用写0px而不是0吗？
@thejh：不。零就是零。 0px 与 0em 或 0cm 相同，因此您可以（并且可以说应该）只写 0。

标签： html css tablelayout

【解决方案1】：

试试

table.skinny { border-collapse:collapse; }

编辑：如果您在 td 中有一个单独的图像，display:block 将摆脱下行空间。

另外，你可以把h1的line-height弄乱，设置成1什么的。

【讨论】：

【解决方案2】：

试试这个：

div.skinny {
   display: inline-block;
   vertical-align: middle;
}

在这里玩一下：http://jsfiddle.net/SebastianPataneMasuelli/qAjkv/

【讨论】：

【解决方案3】：

在原来的布局中，将第二个td的宽度改为*。发生的情况是表格和行有固定的宽度要填充，并且布局引擎在单元格之间共享它。

如果你想使用 div，那么正如 Sebastian 所说，使用 display: inline-block。

【讨论】：

宾果游戏！星号起作用了！现在，你介意解释一下这是做什么的吗？ :) 是说“在第一个 td 之后占用剩余的空间”吗？
不要试图破解神圣星号的奥秘！

【解决方案4】：

这有什么作用吗？

table.skinny {
    border-spacing: 0;
}

虽然题外话了，但几个零和一个零的效果是一样的：

.skinny
{
    margin: 0;
    padding: 0;
    border-style: none;
}

【讨论】：

【解决方案5】：

试试

.瘦 { 浮动：右 }

【讨论】：