我想將兩個(gè)網(wǎng)格項(xiàng)內(nèi)聯(lián)，我正在嘗試創(chuàng)建與此類似的 UI.正如您在 griditemDiv1 中看到的，元素是動(dòng)態(tài)添加的，我希望 griditemDiv2 中的內(nèi)容保留在當(dāng)前位置。我使用position:fix;將它們放在單個(gè)網(wǎng)格元素下 頂部一些像素等我可以獲得所需的布局，但它們的位置隨著屏幕尺寸的變化而變化。我唯一的想法是將它們作為兩種不同的布局內(nèi)聯(lián)顯示并填充各自的內(nèi)容。任何其他替代解決方案，歡迎您:)如果您認(rèn)為我的想法可行。讓我知道如何使兩個(gè)網(wǎng)格元素內(nèi)聯(lián)顯示？#griditems1 { display:grid; grid-template-columns: 100px 80px 50px; padding: 10px}#griditems2 { display:grid; grid-template-columns: 100px 80px 50px; padding: 10px}<div id="mainDiv"> <div id="griditems1"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> <div id="griditems2"> <div>11</div> <div>22</div> <div>33</div> <div>44</div> <div>55</div> <div>66</div> </div></div>
1 回答
一只斗牛犬
TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超2個(gè)贊
這是一種使用單個(gè)grid和一點(diǎn)flexbox尋址較小區(qū)域的方法。
.grid-container {
display: grid;
grid-template-columns: 3fr 1fr 1fr;
}
.grid-container .item {
display: flex;
}
.right .item {
flex-direction: column;
}
.left .item {
margin-bottom: .5rem;
}
.item [type="text"] {
flex-grow: 1;
}
<div class="grid-container">
<div class="left">
<div class="item">
<button type="button">-</button>
<input type="text" value="feature">
</div>
<div class="item">
<button type="button">-</button>
<input type="text" value="feature">
</div>
<div class="item">
<button type="button">-</button>
<input type="text" value="feature">
</div>
<div class="item">
<button type="button">-</button>
<input type="text" value="feature">
</div>
<div class="item">
<button type="button">+</button>
<input type="text" value="feature">
</div>
</div>
<div class="center"></div>
<div class="right">
<div class="item">
<input type="date">
<button type="button">Borrow</button>
</div>
</div>
</div>
- 1 回答
- 0 關(guān)注
- 156 瀏覽
添加回答
舉報(bào)
0/150
提交
取消