• <var id="gzb7d"><strong id="gzb7d"></strong></var>
    <td id="gzb7d"></td>

    1. <acronym id="gzb7d"></acronym>
      瀏覽器部落:綠色安全純凈官方版,體驗當今速度最快的瀏覽器!

      如何設置Grid Layout (網格布局)列的最小寬度

      時間:2019-4-9作者:未知來源:瀏覽器部落人氣:

      網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。
      如何設置Grid Layout (網格布局)列的最小寬度?設置網格的列最小寬度時,在網格的列寬設置部分中使用minmax()函數,下面我們就來看具體的內容。

      網格布局

      我們先來看一下minmax()函數的格式

      minmax(最小寬度,最大寬度)

      代碼示例

      在下面的代碼中,網格的第二行的寬度被指定為最大寬度為1fr,最小寬度為320像素。

      .container {
        display: grid;  
        grid-template-columns: 240px minmax(320px, 1fr) 200px;  
        grid-template-rows: 120px auto 120px;
        }

      我們來看具體的例子

      代碼如下

      創建以下CSS,HTML文件。

      CSS代碼:

      grid-column-minimum-width.css

      .Container {
          display: grid;    
          grid-template-columns: 160px minmax(160px, 1fr) 160px 160px;    
          grid-template-rows: 120px 120px;    
          border: solid #ff6a00 1px;
          }
      .GridItem1 {
          grid-column: 1 / 2;    
          grid-row: 1 / 2;    
          background-color: #ff9c9c;
          }
      .GridItem2 {
          grid-column: 2 / 3;    
          grid-row: 1 / 2;    
          background-color: #ffcb70;
          }
      .GridItem3 {
          grid-column: 3 / 4;    
          grid-row: 1 / 2;    
          background-color: #fffd70;
          }
      .GridItem4 {
          grid-column: 4 / 5;    
          grid-row: 1 / 2;    
          background-color: #b0ff70;
          }
      .GridItem5 {
          grid-column: 1 / 2;    
          grid-row: 2 / 3;    
          background-color: #7ee68d;
          }
      .GridItem6 {
          grid-column: 2 / 3;    
          grid-row: 2 / 3;    
          background-color: #7ee6e2;
          }
      .GridItem7 {
          grid-column: 3 / 4;    
          grid-row: 2 / 3;    
          background-color: #95a7f5
          }
      .GridItem8 {
          grid-column: 4 / 5;    
          grid-row: 2 / 3;    
          background-color: #d095f5;
          }

      HTML代碼:

      grid-column-minimum-width.html

      <!DOCTYPE html><html><head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="grid-column-minimum-width.css" />
      </head>
      <body>
        <div class="Container">
          <div class="GridItem1">內容1</div>
          <div class="GridItem2">內容2</div>
          <div class="GridItem3">內容3</div>
          <div class="GridItem4">內容4</div>
          <div class="GridItem5">內容5</div>
          <div class="GridItem6">內容6</div>
          <div class="GridItem7">內容7</div>
          <div class="GridItem8">內容8</div>
        </div>
      </body>
      </html>

      說明:

      網格列的寬度由CSS文件中Container類的grid-template-columns來設置的。
      由于描述了四個值,因此網格是四列。它左起有以下值。

      160px

      minmax(160 px,1 fr)

      160px

      160px

      第2列以外都設置了160像素的固定值,是固定的寬度。第二列為minmax(160 px,1 fr),最大列寬為1 fr,最小列寬是160像素。因為指定了1 fr,所以列隊的寬度會擴大到框架的寬度。

      根據以下的設置,在窗口寬度上顯示網格的框,1,3,4列是用160像素寬度顯示的,第2列能伸縮的動作。

        grid-template-columns: 160px minmax(160px, 1fr) 160px 160px;

      顯示結果

      使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

      2345截圖20181129133728.png

      縮小窗口寬度。第2列以外是固定寬度,第2列的寬度縮小,如下圖所示。

      2345截圖20181129134103.png

      寬度縮小到160像素,這是第二行的最小寬度。

      2345截圖20181129134440.png

      此外,如果縮短窗口寬度,則無法進一步縮小寬度,因此將顯示左右滾動條。

      2345截圖20181129135009.png

      以上就是如何設置Grid Layout (網格布局)列的最小寬度的詳細內容,更多請關注php中文網其它相關文章!


      網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




      關鍵詞:如何設置Grid Layout (網格布局)列的最小寬度




      Copyright © 2012-2018 瀏覽器部落(http://www.atelierescobar.com) .All Rights Reserved 網站地圖 友情鏈接

      免責聲明:本站資源均來自互聯網收集 如有侵犯到您利益的地方請及時聯系管理刪除,敬請見諒!

      QQ:1006262270   郵箱:kfyvi376850063@126.com   手機版 

      国产乱子伦漫画,猫咪www免费人成在线观看,国产真实哺乳吃奶在线观看,超乳专区爆乳国产