space - 为什么三个主要按钮的右边会出现空格？

Question

请参阅以下链接:http://www.howru.nl/preken/new/test3.html

出于某种原因，我一直在三个主要按钮的右侧留出空间。为了在这个论坛上更好地识别这一点，我临时启用了相关表格的边框。

我认为问题出在以下类中:

.button
{
    display: block;
    width: 350px;
    height: 135px;

    margin-left: 7px;
    margin-right: 7px;
    margin-top: 10px;
    margin-bottom: 20px;

    text-decoration: none;

    background-position: top;

    color: #FFFFFF;
}

指定的宽度为背景图片的实际宽度。完整的 CSS 表可以在 http://www.howru.nl/preken/new/styles.css 找到。

右栏(文本)应该 float 在右边，就像目前的情况一样。左列(按钮)应 float 在左侧(目前就是这种情况)，而中心图片应 float 在中央。奇怪的是左边的列在表格中占据了更多的空间，而没有一个是固定宽度的。

理想情况下，我不想两次指定列的宽度(对于 TD 和内容，如果 BG 图像显示在被阻止的内容上)；在下面的建议解决方案中，display-block'd 指定了宽度(背景图像的宽度)和父 TD 元素......这是我不喜欢的，也是我开始写这篇文章的原因。因为我仍然不明白为什么 TD 没有平均共享可用表空间:

现在第 1 列(左)似乎占用最多，虽然它不需要那么多，第二列占用少一点，右列仅占用指定的内部宽度，而左侧(第 1 列) ) 列具有相同的(为内容而不是 TD 指定的宽度)并且明显不坚持该宽度，而正确的 TD 则......)

在 IE 和 Opera 中我都明白了；知道我错过了什么吗？？!

目标是了解正在发生的事情及其原因。所以我不是在寻找一种廉价的修复方法 - 因为有 100 种“丑陋”的方法可以做到这一点。

Answer 1

这是我所做的更改。尝试这个。顺便说一句，你应该使用 % 而不是 px

.top {
vertical-align: top;
width: 350px;
}

从 .blkright 中移除 float

.blkright {
}

.title {
font-size: 14px;
font-weight: bold;
letter-spacing: -1px;
padding-bottom: 5px;
text-align: center;
}

.column {
   margin-left: 12px;
   overflow: hidden;
   width: 325px;
    }