Question

我目前正在尝试创建一个基于浏览器的日历，允许将作业或会议等覆盖在顶部，这将通过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>");

正如我现在所理解的那样，这应该意味着创建的<div>继承了它所包含的<td>的宽度，因此可以很好地适应单元格。但是，当我测试它时，Opera或Firefox都没有发生这种情况 What I see

有谁知道为什么会这样？

Answer 1

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

Answer 2

也许在作业div上尝试“width：auto”？

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

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

Answer 3

添加display：inline block;到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 }

CSS继承宽度不起作用

3 个答案: