在单个 div 块中合并几个 div答案

【问题标题】：Merge fews div in block of individual divs在单个 div 块中合并几个 div
【发布时间】：2020-10-14 05:30:32
【问题描述】：

我创建了一个数字板，其中某些数字需要合并为单个单元格。请参考输出如何像图片

Flowing 是它的 HTML 部分，我使用了非合并单元格的边距和合并单元格的边框，但是单元格的对齐方式扭曲了。我怎样才能以不同的方式实现？任何潜在客户或可运行的链接都会有所帮助

<!DOCTYPE html>
<html>
<body>
<div class="parent">
    <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>

我尝试过的

.parent {
    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;
}

【问题讨论】：

合并单元格有什么问题，期望的结果是什么？
它看起来不错，你能再解释一下，什么不适合你的输出吗？
@TheDaniel：你可以在图片中看到想要的结果
好的，你能描述一下它现在的样子吗？你说的扭曲是什么意思。请添加您的 css 和任何其他相关代码。
你有父类和css的css吗？

标签： javascript html css flexbox

【解决方案1】：

希望对你有所帮助

var x = document.getElementsByClassName('child');
var y = 'child merged';
var c, d, e;
for (var i = 1; i < x.length - 1; i++) {

    c = x[i - 1].getAttribute('class');
    d = x[i + 1].getAttribute('class');
    e = x[i].getAttribute('class');

    if (c === y && e === y && d === y) {
        x[i].setAttribute('style', 'margin: 5px 0px 5px 0px;');
    }
    else if (c !== y && e === y && d !== y) {
        x[i].setAttribute('style', 'margin: 5px 5px 5px 5px;');
    }
    else if (c !== y && e === y && d === y) {
        x[i].setAttribute('style', 'margin: 5px 0px 5px 5px;');
    }
    else if (c === y && e === y && d !== y) {
        x[i].setAttribute('style', 'margin: 5px 5px 5px 0px;');
    }
    else if (c === y && x[i - 2] === undefined && e !== y) {
        x[i - 1].setAttribute('style', 'margin: 5px 5px 5px 5px;');
    }
    else if (i === x.length - 2 && d === y) {
        x[i + 1].setAttribute('style', 'margin: 5px 5px 5px 5px;');
    } else { }

    if (x[i + 2] === undefined && e === y && d === y) {
        x[i + 1].setAttribute('style', 'margin: 5px 5px 5px 0px;');
    }

    if (c === y && x[i - 2] === undefined && e === y) {
        x[i - 1].setAttribute('style', 'margin: 5px 0px 5px 5px;');
    }

    if (i === 7 || i === 14 || i === 21) {
        x[i - 1].style.marginRight = '5px';
        x[i].style.marginLeft = '5px';
    }

}

.parent {
    display: grid;
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px;
    text-align: center;
}

.child {
    border: 1px solid #ccc;
    margin: 5px 5px 5px 5px;
}

.merged {
    margin: 5px 0px 5px 0px;
    padding: 0px;
    border: 0px;
    background: #1792E5;
}

<div class="parent">
    <div class="child merged">14</div>
    <div class="child merged">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 merged">34</div>
    <div class="child">35</div>
    <div class="child">36</div>
    <div class="child merged">37</div>
    <div class="child merged">38</div>
    <div class="child">39</div>
    <div class="child merged">40</div>
    <div class="child merged">41</div>
    <div class="child merged">42</div>
    <div class="child">43</div>
    <div class="child merged">44</div>
    <div class="child">45</div>
    <div class="child ">46</div>
    <div class="child merged">47</div>
</div>

【讨论】：

问题还是没有解决，蓝白框之间的空间错位了
@Lejin KR，是的，你是对的！我可以使用 JavaScript 吗？
如果再来一组合并单元格，它将失败，例如，如果我想合并 35,36，感谢您的帮助
我认为代码中的所有错误都已经修复了。

【解决方案2】：

对修复问题的 css 文件进行了一些更改。如果您有任何问题，请告诉我

.parent {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px 100px 100px 100px;
}

.child {
    border: 1px solid #ccc;
    margin: 10px 10px 10px 10px;
}

.middle {
  margin: 10px 0px 10px 0px;
  background: blue;
  border:10px;
}

.end {
    margin: 10px 10px 10px 0px;
    border: 10px;
    background: blue;
}

.start {
    margin: 10px 0px 10px 10px;
    border: 10px;
    background: blue;
}

<!DOCTYPE html>
<html>
<body>
<div class="parent">
    <div class="child">14</div>
    <div class="child">15</div>
    <div class="child">16</div>
    <div class="child">17</div>
    <div class="child merged start">18</div>
    <div class="child merged middle">19</div>
    <div class="child merged end">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>

【讨论】：