1

我不敢相信我在这里或谷歌上找不到这个问题——这似乎是一个我不好意思问的愚蠢问题，但是今天早上它让我发疯了……

想象一下用这样的 div 制作的单列堆叠条形图看起来有点像温度计：

<div id="thermo">
  <div id="thermored"></div>
  <div id="thermogreen"></div>
</div>

#thermo 是包含的 div，#thermored 是全高背景，#thermogreen 是将更改以反映数据的叠加层 - 在现实世界中，它显示任务的完成百分比。

就目前而言，它有效。但是，它需要在表格单元格内工作（不是我的选择 - 这是对 CMS 的系统限制）。问题是包含 TD 的高度是（尽管尝试固定高度）两个 div 的总和，即使它们相对定位并重叠。

这是当前的 css - 它并不漂亮，因为在过去的几个小时里我一直在尝试这么多的定位组合

#thermo{
    width:140px;
    height:500px;
    position:relative;
}
#thermored{
    width:50px;
    height:100%;
    margin-left: 20px;
    background-color: red;
}
#thermogreen{
    width:50px;
    height:280px;
    margin-left: 20px;
    background-color: green;
    position:relative;
    bottom: 280px;
    float:left;
}

*编辑有关信息，我遇到的问题是在 Chrome 和 FF 中 - IE(8) 按照我想要的方式设置 TD 高度

4

3 回答 3

2

我认为您遇到的问题来自于relative定位使元素保持正常流动的事实。您是否尝试过设置position: absolute;内部thermogreendiv？绝对定位使元素脱离正常流动，因此td标签只会考虑您的thermodiv 的高度，该高度设置为 500px。（编辑：您实际上可以thermored不使用 position 属性离开。它设置为 div 高度的 100% thermo，这意味着无论您td的高度是 500px，并且您不必担心 CSS）。

看看我想出的 jsfiddle：http: //jsfiddle.net/dgRCu/3/

这能解决您的问题吗？似乎td一直保持在 500 像素高度，而不是现在扩展到 700+。

我不确定这些 div 的预期用途是什么，所以我bottom: 0;在thermogreendiv 上进行了设置，因为看起来你想要的是绿色条在高度上扩展，而红色条是背景色。

于 2013-02-14T23:49:42.053 回答
0

TD 单元格将折叠/展开到“最高”高度的大小。在单元格中使用 css 会导致不同的浏览器或特别是电子邮件阅读器出现不同的问题。

所以，你已经尝试过：

<tr>
<td height="500"></td>
</tr>

然后，把那些块元素放在那里？使表格的第一个 td 单元格的高度超过两个 div 的总和。

您正在浮动一个，因此最大的应该强制高度。

于 2013-02-14T22:56:39.547 回答
0

您是否使用过 IE 中的开发工具来查看表格单元格是如何呈现的？您是否有机会仅使用 html 表和 css 代码制作 jsfiddle.net？

于 2013-02-14T23:51:28.207 回答