我需要以 div 看起來像這樣的方式設計父 div：
<div class="parent">
<div>1</div>
<div>4</div>
<div>2</div>
<div>5</div>
<div>3</div>
<div>6</div>
</div>
此外，父 div 必須分為列樣式，其中 1、2、3 應該依次出現在包裝 div 的左側和 4、5、6 的右側
uj5u.com熱心網友回復：
你可以使用這樣的網格來做到這一點： -
.parent {
display: grid;
grid-template-rows: repeat(3, 20px);
grid-template-columns: repeat(2, 20px);
}
uj5u.com熱心網友回復：
你的意思是這樣嗎？
.parent {
display:grid;
grid-template-columns:auto auto auto;
color:red;
background-color:gray;
}
.number {
height:30px;
border:1px solid white;
text-align:center;
border:1px solid black;
}
.number:hover {
background-color:#fff;
}<div class="parent">
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
</div>uj5u.com熱心網友回復：
是你想要的嗎？
.parent {
column-count:2;
color:red;
column-gap:5px;
}
.number {
height:30px;
border:1px solid white;
text-align:center;
border:1px solid black;
}
.number:hover {
background-color:#fff;
}<div class="parent">
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/433729.html
上一篇：使用jQuery動態更改元素