如何實(shí)現(xiàn)頁(yè)面中有間隔的方格布局？

來(lái)源 |?https://juejin.cn/post/6897794764444762120

典型的布局示例

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

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

1. 當(dāng)給一個(gè)未設(shè)置寬的塊級(jí)元素，設(shè)置了margin（水平方向）的話，那么margin值（正值）加上改元素的width的和等于父元素的寬度
2. 當(dāng)給一個(gè)未設(shè)置寬的塊級(jí)元素，設(shè)置了margin（水平方向）的話，那么margin值（負(fù)值）剛好是該元素的寬度超出父元素的距離

規(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è)就行。

本文完~