3

我目前正在尝试创建一个基于浏览器的日历，它允许将工作或会议等覆盖在顶部，这将使用 AJAX（或类似的）动态检索并显示给最终用户。

不幸的是，我的 CSS （非常）生锈了，或者这只是另一个让我难以理解的奇怪现象。

基本思想是<div>为每个会议或工作在<td>日历中正确的日期/时间创建一个。但是，我目前无法让这个 div 继承它的宽度，<td>因此它不会与其他日子重叠。

我正在使用的当前 CSS 包含... 

td {
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-bottom: solid 1px lightgray;
    border-top: solid 1px lightgray;
    **width: 12.5%;**
    height: 10px;
    font-size: 0.1em;
}

div.job { 
       position: absolute; 
       background: #C83636; 
       background: rgba(200, 54, 54, 0.7); 
       font-size: 8px; 
       color: white; 
       margin-top: 3px; 
       width: inherit; 
       height: 10px; 
}

然后我将使用 jquery 创建这些 div，如下所示：
$("#1-1").html("<div class='job'>Some test text</div>");

据我目前的理解，这应该意味着 created<div>继承了<td>它所包含的宽度，因此很好地适合单元格。但是，当我测试它时，这在 Opera 或 Firefox 中都没有发生。
我所看到的

有谁知道为什么会这样？

4

3 回答 3

4

将位置：绝对更改为 div.job 类的位置：相对

于 2012-07-04T11:17:36.603 回答
0

也许在工作 div 上尝试“width:auto”？

可能还将 div 设置为“display:inline-block”。

我认为刚才发生的事情是你的工作 div 继承了 12.5% 的宽度，所以它们变成了 12.5% 的 12.5%（如果这有意义的话？）。

于 2012-07-04T11:16:24.183 回答
0

添加显示：内联块；到 div.job

这里有一点点修改......随意使用它

td {
 border-left: solid 1px gray;
 border-right: solid 1px gray;
 border-bottom: solid 1px lightgray;
 border-top: solid 1px lightgray;
 width: 12.5%;
 height: 10px;
 font-size: 1.1em;
}
div.job { 
 background: #C83636;
 background: rgba(200, 54, 54, 0.7);
 font-size: 1.1em;
 color: white; width: 100%; height: 100%;display:inline-block }
于 2012-07-04T11:44:46.747 回答