Javascript 在单个div块中合并fews div_Javascript_Html_Css_Flexbox

Javascript 在单个div块中合并fews div

javascript html css

Javascript 在单个div块中合并fews div,javascript,html,css,flexbox,Javascript,Html,Css,Flexbox,我需要创建一个数字板，其中某些数字需要合并为单个单元格。请参考输出与图片的相似性流动是HTML的一部分，我对非合并单元格使用边距，对合并单元格使用边框，但单元格的对齐方式扭曲了。如何以不同的方式实现目标？任何潜在客户或可运行的链接都将非常有用 <!DOCTYPE html> <html> <body> <div class="parrent"> <div class="child">14

我需要创建一个数字板，其中某些数字需要合并为单个单元格。请参考输出与图片的相似性

流动是HTML的一部分，我对非合并单元格使用边距，对合并单元格使用边框，但单元格的对齐方式扭曲了。如何以不同的方式实现目标？任何潜在客户或可运行的链接都将非常有用

<!DOCTYPE html>
<html>
<body>
<div class="parrent">
    <div class="child">14</div>
    <div class="child">15</div>
    <div class="child">16</div>
    <div class="child">17</div>
    <div class="child merged">18</div>
    <div class="child merged">19</div>
    <div class="child merged">20</div>
    <div class="child">34</div>
    <div class="child">35</div>
    <div class="child">36</div>
    <div class="child">37</div>
    <div class="child">38</div>
    <div class="child">39</div>
    <div class="child">40</div>
</div>
</body>
</html>

我希望我能帮上忙

var x=document.getElementsByClassName（'child'）；
变量y=‘子合并’；
变量c、d、e；
对于（变量i=1；i


.parrent{
显示：网格；
网格模板列：50px 50px 50px 50px 50px 50px 50px 50px；
网格模板行：50px 50px 50px 50px 50px 50px 50px 50px；
文本对齐：居中；
}
.孩子{
边框：1px实心#ccc；
保证金：5px 5px 5px 5px；
}
.合并{
保证金：5px0px 5px0px；
填充：0px；
边界：0px；
背景：#1792E5；
}

14
15
16
17
18
19
20
34
35
36
37
38
39
40
41
42
43
44
45
46
47
在css文件中做了一些更改，解决了这个问题。如果你有任何问题，请告诉我
.parrent{
显示：网格；
网格模板列：100px 100px 100px 100px 100px 100px 100px 100px 100px；
网格模板行：100px 100px 100px 100px 100px 100px 100px 100px 100px；
}
.孩子{
边框：1px实心#ccc；
保证金：10px 10px 10px 10px；
}
.中{
保证金：10px 0px 10px 0px；
背景：蓝色；
边界：10px；
}
.完{
保证金：10px 10px 10px 0px；
边界：10px；
背景：蓝色；
}
.开始{
保证金：10px 0px 10px 10px；
边界：10px；
背景：蓝色；
}

14
15
16
17
18
19
20
34
35
36
37
38
39
40
合并的单元格有什么问题？期望的结果是什么？看起来不错，请你再解释一下，输出中什么不适合你？丹尼尔：你可以在图片中看到期望的结果。好的，你能描述一下它现在的样子吗？你说的扭曲是什么意思。请添加您的css和任何其他相关的代码。您是否有用于父级和css的css？问题仍然没有解决，蓝色和白色框之间的空间丢失aligned@Lejin是的，你是对的！我可以使用JavaScript吗？如果再出现一堆合并的单元格，它就会失败，例如，如果我想合并35,36。谢谢你的帮助。我想代码中的所有错误都已经修复了。
.parrent {
    display: flex;        
    flex-wrap: wrap;
    align-content: flex-start;
 }
 .child {
    margin: 4px;
    padding: 0;
    height: 35px;
    width: 35px;
    background: #FFFFFF;
    border: 1px solid #C0C0C0;
 }
 .merged{
    margin: 0;
    padding: 4px;
    border-color: #1792E5;
    background-color: #1792E5;
    color: #FFFFFF;
}