在单个 div 块中合并少数 div
我创建了一个数字板，其中某些数字需要合并为单个单元格。请参考输出看起来像图片
流动是它的 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;
}
慕标5832272浏览 143回答 2
2回答
-
月关宝盒
希望对您有所帮助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> -
蛊毒传说
在解决问题的 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>
随时随地看视频慕课网APP
相关分类
JavaScript