0

请参阅以下链接： 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找到

右列（文本）应浮动在右侧，就像目前的情况一样。左栏（按钮）应该浮动在左边（就像目前的情况一样），并且中心图片应该浮动在中心。奇怪的是左列在表格中占用了更多空间，而没有一个固定宽度。

理想情况下，我不想指定列的宽度两次（对于 TD 和内容，如果显示块内容上有 BG 图像）；在下面提出的解决方案中，显示块具有指定的宽度（背景图像的宽度）和父 TD 元素......这是我不喜欢的，我开始这篇文章。因为我仍然不明白为什么 TD 没有平等地共享可用表空间：

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

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

目标是了解正在发生的事情以及原因。所以我不是在寻找便宜的解决方案——因为可以用 100 种“丑陋”的方式来做到这一点。

4

4 回答 4

1

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

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

从 .blkright 中删除浮动

.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;
    }
于 2013-02-10T13:50:24.340 回答
0

更改右表 .top .column 的宽度以将此空间更改为按钮右侧

.column {
    overflow: hidden;
    padding: 5px 5px 25px;
    width: 290px;

（最初宽度是 250px）因为它试图适应宽度： 100% 你已经设置你也可以删除 250px ，因为右列是你设置宽度的唯一列

于 2013-02-10T12:50:23.593 回答
0

我最终不确定您希望其余部分（例如文本段落）如何对齐，但这是我的方法。

首先，给每个正文列一个类或一个 ID。您将这些类<td>分别分配给三个 s。

.content-left {
   float: left;
}


.content-mid {
   float: left;
}

.content-right {
   display: table-row;
}

尽管此解决方案比 's 需要更多的努力IanO.S.，但此解决方案也更具动态性。如果有一天您的按钮或图像尺寸发生变化，您不必侵入您的代码，查找并编辑您的像素宽度。

于 2013-02-10T12:52:52.620 回答
0

在第一个表格单元格上添加宽度声明

.top:first{
width: 364px;
}

你不会再看到任何空格了

于 2013-02-10T12:54:28.170 回答