我正在嘗試做的是一個挑戰。我有一個這樣的 HTML：
<div class"list">
<div class="item head">HEAD</div>
<div class="item">ITEM #1</div>
<div class="item">ITEM #2</div>
<div class="item">ITEM #3</div>
<div class="item">ITEM #4</div>
</div>
我無法更改HTML 代碼。我必須將其呈現為：
| HEAD |
| ITEM #1 | ITEM #3 |
| ITEM #2 | ITEM #4 |
所以我只能使用 CSS。無論如何，我可以使用 FLEX。我試過：
.list {
flex-direction: column;
flex-wrap: wrap;
}
.list .item {
width: 50%;
}
.list .item.head {
width: 100%;
}
我得到了預期的頭部，但我不知道如何在第 2 項之后判斷要打破和包裹。請記住，我無法更改 HTML。
任何的想法？
uj5u.com熱心網友回復：
我用了編碼筆，但無法讓你的 CSS 作業，我確實讓它作業了......
<div class"list">
<div >HEAD</div>
<div >ITEM #1</div>
<div >ITEM #2</div>
<div >ITEM #3</div>
<div >ITEM #4</div>
</div>
.list {
justify-content: center;
width: 100%;
margin: 0 auto;
}
.item {
width: 50%;
margin: 0 auto;
flex-direction: column;
text-align: center;
float: left;
}
.itemB {
width: 50%;
margin: 0 auto;
flex-direction: column;
text-align: center;
float: right;
}
.head {
text-align: center;
}
uj5u.com熱心網友回復：
為此使用 CSS 網格：
.list {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: dense;
text-align:center;
}
.list .item:nth-child(3) {
grid-column: 1;
}
.list .item.head {
grid-column: 1/-1
}<div class="list">
<div class="item head">HEAD</div>
<div class="item">ITEM #1</div>
<div class="item">ITEM #2</div>
<div class="item">ITEM #3</div>
<div class="item">ITEM #4</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/397366.html