html - 我可以在一个 td 内内联显示 30 个 div 吗？

Question

我用html和css制作了一个日历。

我每 30 分钟的时间跨度都有单独的 td。

但我想每分钟在该 td 内创建 30 个 div。

现在它的显示是这样的：

但我想在一行中显示每个 div。

显示我在每个 div 中写的每个 div。

div是这样的：

 <div style="display:inline-block; clear:both; width:0.1%;" class="08:00">'</div>

有人可以帮我吗？

score 2 · Accepted Answer

首先，对您的代码进行一些重要的改进。

你有同样的东西，但代码很漂亮：http: //jsfiddle.net/daCrosby/FHfjL/7/

现在，你的问题。“[如何] 在一行中显示每个 div？” 我不太确定您是否希望每个 div 在一行（总共 30 行），或者每个 div 在同一行（总共只有 1 行）。所以这是两种方式：

要在自己的行上显示每个 div：

.tbDay div{
    display:block;
}

要在一行中显示所有 30 个：

.tbDay div{
    display:inline-block;
    width:3.333333%; /* 100% divided by 30 divs */
    margin-left:-4px;
}

注意margin-left:-4px;. 这是对此处讨论的内联块元素之间的间距的修复。

score 1 · Accepted Answer

如果你想用那些 div 来显示时间流逝，

您可以在背景中使用渐变和 % 甚至更好<meter></meter>。
http://www.w3.org/wiki/HTML/Elements/meter
您可以轻松地从 js 或服务器端脚本填充正确的值来更新您的日历。

干杯

score 0 · Accepted Answer

clear:both如果要显示它们，为什么要这样做inline-block？只需删除该样式规则，它就会按您的预期工作。

score 0 · Accepted Answer

您将分钟 div 显示为display:inline-block

将其更改为block或完全删除。还可以考虑使用列表而不是 div。

编辑上面的答案假设“每个 div 在一个新行中”意味着一分钟 div = 一个新行根据下面评论中的说明，要使 td 中的所有 div 出现在一行中，请应用white-space:nowrap

例如，将以下内容插入小提琴的 css 部分：

#tblDay td{
    white-space:nowrap;
}

score 0 · Accepted Answer

当您设置display:inline-block时，该元素实际上表现得像一个文本字符，否则您可以将其视为一个块。

除此之外，这意味着如果没有足够的空间，它将换行。

要解决此问题，请添加white-space:nowrap到容器元素。（可选）添加white-space:normal到 inline-block div。

我还建议将 CSS 规则定义为：

.tdDay {white-space:nowrap}
.tbDay>div {
    display:inline-block;
    white-space:normal;
}

5 回答 5