首頁猿問在單個 div 塊中合并少數 div

在單個 div 塊中合并少數 div

JavaScript

慕標5832272 2023-05-11 14:02:23

我創建了一個數字板，其中某些數字需要合并為單個單元格。請參考輸出看起來像圖片流動是它的 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>

反對回復 2023-05-11

蠱毒傳說

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>

</body>

</html>

反對回復 2023-05-11

2 回答
0 關注
177 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在單個 div 塊中合并少數 div

在單個 div 塊中合并少數 div

2 回答

添加回答