我创建了一个数字板，其中某些数字需要合并为单个单元格。请参考输出看起来像图片流动是它的 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;}
2 回答
月关宝盒
TA贡献1772条经验 获得超5个赞
希望对您有所帮助
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>
蛊毒传说
TA贡献1895条经验 获得超3个赞
在解决问题的 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>
添加回答
举报
0/150
提交
取消