這篇文章主要介紹“如何實現(xiàn)頁面中有間隔的方格布局”，在日常操作中，相信很多人在如何實現(xiàn)頁面中有間隔的方格布局問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何實現(xiàn)頁面中有間隔的方格布局”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、錫林浩特ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學管理、有技術(shù)的錫林浩特網(wǎng)站制作公司

典型的布局示例

如上圖所示的布局，方格中間有一定的間隙，間隙是固定的。應(yīng)該如何布局會更加完美呢，比如要保證在布局完成的情況下，可以快速的添加一個元素依然保持這樣的布局。以及當出現(xiàn)第二行的時候，這樣的布局依然能夠不受影響。又不用修改太多的內(nèi)容。

設(shè)置寬為100%和塊元素的默認寬度

現(xiàn)在在這里說一個問題，就是塊元素的寬度默認是占滿一行，我們很容易和給元素設(shè)置100%混淆。其實呢，這兩個雖然表現(xiàn)上很容易讓我們以為他們展現(xiàn)的效果是一樣的，因為這兩種方式都是占滿了父元素。但是他們之間還是有很大的區(qū)別的。
他們的區(qū)別主要在于元素的寬度是隨著什么而變化的，如果設(shè)置100%的話，那么該元素的width始終是和父元素保持一致的，給該元素設(shè)置的margin是不會影響該元素width變化的。當然僅有父元素的寬度會影響該元素的width變化。如果不設(shè)置寬的話，塊元素是獨占一行的，那么該元素的width，不僅受父元素的影響，也受該元素的margin的影響。

獨占一行的塊元素的寬設(shè)置margin的影響

記住以下兩條規(guī)律

• 當給一個未設(shè)置寬的塊級元素，設(shè)置了margin（水平方向）的話，那么margin值（正值）加上改元素的width的和等于父元素的寬度

• 當給一個未設(shè)置寬的塊級元素，設(shè)置了margin（水平方向）的話，那么margin值（負值）剛好是該元素的寬度超出父元素的距離

如下圖所示：

規(guī)律1示例：

規(guī)律2示例：

解決方案

劃分平均區(qū)域

首先在一個橫向區(qū)域，平分了5份，且橫向排列，那么我們采用浮動的橫向排列，且平均把每個元素設(shè)置成20%。

<ul class="list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.list{
 overflow: hidden;
}
.list li{
 width: 20%;
    height: 100px;
    float: left;
}

在每個區(qū)域中放置內(nèi)容，通過margin-right隔出間隔

<ul class="list">
  <li>
   <div class="content"></div>
  </li>
  <li>
   <div class="content"></div>
  </li>
  <li>
   <div class="content"></div>
  </li>
  <li>
   <div class="content"></div>
  </li>
  <li>
   <div class="content"></div>
  </li>
</ul>

.list{
 overflow: hidden;
}
.list li{
 width: 20%;
    height: 100px;
    float: left;
}
.content{
 margin-right: 10px;
}

此時我們可以想象到，最后一個元素還多了一個10px的間距，那么最后一步就是如何解決這個間距的問題。

拉伸父元素，隱藏尾部的間隙

我們給list再套一個元素，讓list在其父元素下拉伸，剛好隱藏掉多余的部分。

<div class="wrapper">
  <ul class="list">
    <li>
      <div class="content"></div>
    </li>
    <li>
      <div class="content"></div>
    </li>
    <li>
      <div class="content"></div>
    </li>
    <li>
      <div class="content"></div>
    </li>
    <li>
      <div class="content"></div>
    </li>
  </ul>
</div>

.wrapper{
 width: 800px;
    overflow: hidden;
}
.list{
 overflow: hidden;
    margin-right: -10px;
}
.list li{
 width: 20%;
    height: 100px;
    float: left;
}
.content{
 margin-right: 10px;
}

可以查看實際效果，最終能實現(xiàn)我們開頭所展示的效果！且這種布局方式有很多的擴展性，如果一行是4個，那么只需要把每個元素的寬設(shè)置為 25%,且在元素的個數(shù)中減去一個就行。

到此，關(guān)于“如何實現(xiàn)頁面中有間隔的方格布局”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

當前題目：如何實現(xiàn)頁面中有間隔的方格布局
本文網(wǎng)址：http://chinadenli.net/article26/gohocg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站排名、標簽優(yōu)化、電子商務(wù)、Google、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)