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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何內嵌顯示網格線項目?

如何內嵌顯示網格線項目?

互換的青春 2023-08-21 17:53:10
我想將兩個網格項內聯,我正在嘗試創建與此類似的 UI.正如您在 griditemDiv1 中看到的,元素是動態添加的,我希望 griditemDiv2 中的內容保留在當前位置。我使用position:fix;將它們放在單個網格元素下 頂部一些像素等我可以獲得所需的布局,但它們的位置隨著屏幕尺寸的變化而變化。我唯一的想法是將它們作為兩種不同的布局內聯顯示并填充各自的內容。任何其他替代解決方案,歡迎您:)如果您認為我的想法可行。讓我知道如何使兩個網格元素內聯顯示?#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貢獻1784條經驗 獲得超2個贊

這是一種使用單個grid和一點flexbox尋址較小區域的方法。


.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>

jsFiddle


查看完整回答
反對 回復 2023-08-21
  • 1 回答
  • 0 關注
  • 140 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號