如何利用負margin技術實現平均佈局

前言

咱們日常會利用float佈局來解決IE瀏覽器CSS的兼容性問題，好比淘寶，就是用float佈局來實現的。 咱們會在淘寶頁面會看到下圖這樣一種佈局。

這種圖片均勻分佈的佈局咱們叫平均佈局，那這種佈局又是怎麼實現的呢？ 有的同窗可能以爲，這還不簡單，能夠直接設置父元素div寬度和子元素寬度總和相等就能夠了。 真的有這麼容易嗎，咱們來試一下。

測試

假如咱們令每一個子元素寬度爲100px，一共3個子元素，給每一個子元素一個margin-right，設爲50px，那父元素寬度應爲100x3+50x2=400px。咱們設置一些樣式。html和css代碼以下。

//HTML
<div class="father clearfix">
   <div class="son"></div>
   <div class="son"></div>
   <div class="son"></div>
</div>
複製代碼

//CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.father {
  width: 400px;
  height: 100px;
  margin: 10px;
  background-color: #d5a4cf;
  border: 1px solid black;
}

.son {
  border: 1px solid black;
  background-color: #fff1ac;
  float: left;
  margin-right: 50px;
  width: 100px;
  height: 100px;
}
複製代碼

此時效果以下

咱們發現最後一個子元素被擠下來了，這是爲何呢。不要問爲何，由於這就是CSS。 那咱們該怎麼解決呢，有的同窗說，是受父元素的1px的border影響，咱們把換成outline試一下。

咱們發現仍是沒有起做用，這個時候怎麼辦呢。接下來給你們介紹一種「負margin」的方法。 咱們給父元素和子元素間加一箇中間層，令這個div的margin-right爲-50px，咱們再來試一下。

//HTML
<div class="father clearfix">
  <div class="middle clearfix">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
  </div>
</div>
複製代碼

//CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.father {
  width: 400px;
  height: 100px;
  margin: 10px;
  background-color: #d5a4cf;
  outline: 1px solid black;
}

.son {
  border: 1px solid black;
  background-color: #fff1ac;
  float: left;
  margin-right: 50px;
  width: 100px;
  height: 100px;
}

.middle {
  margin-right: -50px;
}
複製代碼

這個時候咱們發現，中間的div經過「延伸」右外邊距把帶三個子元素「包進去」了，從而實現了平均佈局。

結論

經過咱們的測試，咱們找到了解決平均佈局的方案，但願能對你們有幫助。相關代碼請參考個人demo。因爲本人水平有限，若有描述不許確的地方請給我留言，歡迎交流~