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

-1

我在html和css中做了一个日历。我可以在一个td内显示30个div吗？

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

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

现在它的显示是这样的：

http://jsfiddle.net/mausami/FHfjL/1/

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

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

的div是这样的：

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

任何人可以帮我吗？

来源

2013-06-05 Mausami

jsfiddle，示例代码，正确标记。为什么downvotes？ – Madbreaks

雅正好..为什么downvotes？ – Mausami

由于您使用的是1999年不推荐使用的属性并使用表格进行布局，因此您可能已被降级。 – Rob

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

Class names cannot start with a number.。快速修复是将一些字符串追加到它们的开头 - 我使用了“min_”。
您有多个相同的id。一个id只能使用一次。
将所有样式移到外部 - sop进行内联，很难更新。
你不float荷兰国际集团任何所以你不需要clear:both;

这里有你也有同样的事情，但相当代码：http://jsfiddle.net/daCrosby/FHfjL/7/

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

要在它自己的行显示每个格：

.tbDay div{ 
    display:block; 
}

http://jsfiddle.net/daCrosby/FHfjL/8/

要显示所有在一个30行：

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

注意margin-left:-4px;。这是修复了内嵌块元素as discussed here之间的间距。

http://jsfiddle.net/daCrosby/FHfjL/9/

来源

2013-06-05 01:43:07 DACrosby

woww余裕的事情为我工作。谢谢洛特。 – Mausami

为什么你在做clear:both如果你想显示它们inline-block？只要删除该样式规则，它应该按照您的预期工作。

来源

2013-06-05 00:36:41 Madbreaks

你试过了。但仍然给出相同的结果。 – Mausami

抱歉 - 必须切换浏览器才能看到你的小提琴。它们像你想要的那样显示，但是正在被包裹，因为你的表格单元限制了每个单元格的宽度。 divs不是你的问题。 – Madbreaks

比我应该如何处理表格单元格？ – Mausami

你显示分钟格为display:inline-block

更改为block或完全删除。也考虑使用列表而不是divs。

编辑上述假设“在新线的每个格”的意思1分钟DIV =一个新行按照说明在下面的评论的答案，使TD内所有div出现在一行中，适用a white-space:nowrap

eg插入以下到您的提琴的CSS部分：

#tblDay td{ 
    white-space:nowrap; 
}

来源

2013-06-05 00:38:01

如果我将其更改为阻止比显示每行中的每个div。 – Mausami

真的吗？使用'display：block'将它们显示在一行上？没有 – Madbreaks

他希望每个div在一个单独的行 –

当您设置display:inline-block，该元素有效的行为类似于文字的一个字符，你可以以其它方式处理为一个块。

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

要解决此问题，请将white-space:nowrap添加到容器元素。或者，将white-space:normal添加到内联块div。

我也建议定义CSS规则：

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

来源

2013-06-05 00:41:05

我试过了，但日历设计改变了。时隙宽度不合适。 – Mausami

如果你想利用这些div来显示时间的推移，

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

欢呼声

来源

2013-06-05 00:48:31

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

回答

相关问题