來源 | https://juejin.cn/post/6897794764444762120

典型的布局示例：

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

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

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

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

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

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

當(dāng)給一個(gè)未設(shè)置寬的塊級(jí)元素，設(shè)置了margin(水平方向)的話，那么margin值(負(fù)值)剛好是該元素的寬度超出父元素的距離

如下圖所示：規(guī)律1示例：規(guī)律2示例：

解決方案

劃分平均區(qū)域

首先在一個(gè)橫向區(qū)域，平分了5份，且橫向排列，那么我們采用浮動(dòng)的橫向排列，且平均把每個(gè)元素設(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;}

在每個(gè)區(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;}此時(shí)我們可以想象到，最后一個(gè)元素還多了一個(gè)10px的間距，那么最后一步就是如何解決這個(gè)間距的問題。

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

我們給list再套一個(gè)元素，讓list在其父元素下拉伸，剛好隱藏掉多余的部分。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;}可以查看實(shí)際效果，最終能實(shí)現(xiàn)我們開頭所展示的效果！且這種布局方式有很多的擴(kuò)展性，如果一行是4個(gè)，那么只需要把每個(gè)元素的寬設(shè)置為 25%,且在元素的個(gè)數(shù)中減去一個(gè)就行。本文完~

總結(jié)

以上是生活随笔為你收集整理的splitpane如何设置竖条的宽度_页面中有间隔的方格布局如何完美实现？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。