Html 尝试在我的日历中为AM/PM制作colspan，但为Div

我一直在做一个日历，它同时显示12小时和24小时的时间

我会做一个切换，这样这些只显示我以后想要的。。。但是我试图弄清楚如何将AM/PM div放在它们各自的列集中

我试图完全用div来实现这一点，但似乎Colspan只适用于td元素。我有没有办法做到这一点，这样它就会相应地呈现出来

你可以在这里看到小提琴：

所附代码如下：

。行：第n个子项（偶数）{
背景颜色：浅灰色；
}
.小时{
/*背景颜色：灰色*/
位置：相对位置；
}
半小时{
/*背景色：青色*/
显示：内联块；
浮动：左；
宽度：50%；
身高：100%；
}
一刻钟{
/*背景颜色：粉红色*/
/*边框：1px实心#ccc*/
显示：内联块；
浮动：左；
宽度：50%；
身高：100%；
}
.桌子{
显示：表格；
}
.行{
显示：表格行；
}
.细胞，
.行标题，
.列标题{
显示：表格单元格；
}
.细胞{
边框：实心1px黑色；
高度：1px；
宽度：20px；
文本对齐：居中；
光标：指针；
不透明度：0.25；
z指数：21；
}
.列标题{
文本对齐：居中；
}
.选择：悬停{
背景色：青色；
}
.选定{
背景色：青色；
}
/*.selection>div{*/
/*显示：无*/
/*}*/
#选择器容器{
位置：绝对位置；
边框：实心1px深灰色；
z指数：20；
显示：无；
位置：绝对位置；
背景色：红色；
宽度：1px；
高度：1px；
}

清华大学
0
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
12
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
是
颗粒物

我认为这将是您最好的选择

我给你的桌子加了框，加了一个

最小宽度

。这样可以更好地处理较小的屏幕。之后，我使用

flex

-box将AM和PM居中。请注意，AM和PM父级的宽度基于以下事实：表格单元格的宽度为

22px

（24*22=

480px

）

。行：第n个子项（偶数）{
背景颜色：浅灰色；
}
.小时{
/*背景颜色：灰色*/
位置：相对位置；
}
半小时{
/*背景色：青色*/
显示：内联块；
浮动：左；
宽度：50%；
身高：100%；
}
一刻钟{
/*背景颜色：粉红色*/
/*边框：1px实心#ccc*/
显示：内联块；
浮动：左；
宽度：50%；
身高：100%；
}
.桌子{
显示：表格；
}
.行{
显示：表格行；
}
.细胞，
.行标题，
.列标题{
显示：表格单元格；
}
.细胞{
边框：实心1px黑色；
高度：1px；
宽度：20px；
文本对齐：居中；
光标：指针；
不透明度：0.25；
z指数：21；
}
.列标题{
文本对齐：居中；
}
.选择：悬停{
背景色：青色；
}
.选定{
背景色：青色；
}
#选择器容器{
位置：绝对位置；
边框：实心1px深灰色；
z指数：20；
显示：无；
位置：绝对位置；
背景色：红色；
宽度：1px；
高度：1px；
}
.时间{
显示器：flex；
宽度：528px；
证明内容：周围的空间；
浮动：对；
}
#可调度{
宽度：100%；
}
.框架{
最小宽度：568px；
}

清华大学