亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

為了簡(jiǎn)化我的問(wèn)題，假設(shè)我有一個(gè) 2x2 CSS 網(wǎng)格 div。我使用網(wǎng)格模板來(lái)調(diào)整這 4 個(gè)單元格中的 3 個(gè) div（類別名稱：「btn」、「title」和「info」），如下程式碼片段所示。 （合併第二行中的 2 列以保留第 3 個(gè) div class="info"）

第一個(gè) div (class="btn") 的寬高比為 1/1。所以我只是將它的高度設(shè)定為 10vh，它變成了一個(gè)正方形。

我的問(wèn)題

問(wèn)題是最後一個(gè) div class="info" 中的「input」標(biāo)籤。 如果我沒(méi)有輸入標(biāo)籤，一切都會(huì)按預(yù)期進(jìn)行。中間的網(wǎng)格線尊重第一列的最小內(nèi)容（因?yàn)樗?grid-template-columns 中設(shè)定）並保持在最左邊的位置。

但如果我在最後一個(gè) div 中使用該輸入標(biāo)籤，它會(huì)意外地移動(dòng)網(wǎng)格中線！這是出乎意料的，因?yàn)榫W(wǎng)格的第二行有足夠的空間，我認(rèn)為它不應(yīng)該被移動(dòng)。

要查看問(wèn)題，只需從下面的程式碼片段中刪除輸入標(biāo)記並查看差異。

div.contain {
  display: grid;
  grid-template-rows: fit-content(20%) 45%;
  grid-template-columns: min-content auto;
  grid-template-areas:
        "btn title"
        "info info";
  gap: 10px;
}

.btn {
   grid-area: btn;
   aspect-ratio: 1 / 1;
   height: 10vh;
   border: 1px solid;
   
}

.title {
   grid-area: title; 
   border: 1px solid;
}

.info {
  border: 1px solid;
  grid-area: info;
}

<div class="contain">
  <div class="btn">Btn</div>
  <div class="title">Title</div>
  <div class="info">
    Normal Text
    <div>another div</div>
    <input>
  </div>  
</div>