這個問題你應該很熟悉，然後懵逼，然後放棄

2019 年 12 月 4 日
筆記

本文作者：IMWeb 結一原文出處：IMWeb社區 未經同意，禁止轉載

今天早晨決定寫這篇博文，但是晚上回家的時候，突然一道閃電從腦海劈過，於是臨時決定將這個熟悉然後到懵逼最後到放棄的問題分為兩部分。第一部分為拋出問題，誠邀各路英雄豪傑解答；第二部分為解答，就是一周之後會給出我的答案。

閑話少說，直接上題：

要求如下：

三個橙色圓的大小為60px，固定不變
所有間隙相等，也就是被三個橙色圓劃分成的四個間距相等
應用在移動端，整個黃色為全屏寬度（所以這裡圖片的大小不是真實的大小，如iphone 5那就是320px，6就是375px，6s就是414px等等）
兼容安卓4.0以上（悄悄透露下安卓4.3- 屬性calc不支持）
html & css （no js）

大家可在imweb群(179045421), w3cplus群(1041263), sass群(78142855) 中討論，或者把你的答案發送到我郵箱['623059526', 'qq.com'].join('@')

答案專區

首先感謝各位的參與，有很多朋友給我發了一些非常棒的答案，有的甚至給出了好幾個答案，這裡我就不一一點名了，下面把他們的答案及思維分享下（涉及到css3前綴問題，統一用autoprefixer處理）。

flex方法

1、插入四個空標籤，設置flex:1，這個答案是最多的

<ul class="share-list">      <li class="gap"></li>      <li class="share-item"></li>      <li class="gap"></li>      <li class="share-item"></li>      <li class="gap"></li>      <li class="share-item"></li>      <li class="gap"></li>  </ul>

.share-list{      display: flex;  }  .share-item{      width: 60px;      height: 60px;  }  .gap{      flex: 1;      width: 1%;  }

2、第一個和第三個設置flex為1，第二個為icon的固定寬度；內嵌一層處理具體的icon寬度

<ul class="share-list">      <li class="share-item"><div class="item-inner"></div></li>      <li class="share-item"><div class="item-inner"></div></li>      <li class="share-item"><div class="item-inner"></div></li>  </ul>

.share-list{      display: flex;  }  .share-item:nth-child(1),  .share-item:nth-child(3){      flex: 1;      width: 1%;  }  .share-item:nth-child(2){      width: 60px;  }  .item-inner{      width: 60px;      marigin-left: auto;      margin-right: auto;  }

3、對justify-content: space-between;進行變通

每個間隙的寬度 = （100% - 60px * 3）/ 4 = 25% - 45px

先外套一層wrap，設置左右的padding各位25%，再對list設置負的左右margin各位45px（相當於左右的padding減少了45px），得到第一個和最後一個間隙；中間的間隙通過justify-content: space-between;自由分配

<div class="share-list-wrap">    <ul class="share-list">        <li class="share-item"></li>        <li class="share-item"></li>        <li class="share-item"></li>    </ul>  </div>

share-list-wrap{      padding-left: 25%;      padding-right: 25px;  }  .share-list{      display: flex;      margin-left: -45px;      margin-right: -45px;      justify-content: space-between;  }

4、高級justify-content: space-between;法

直接使用list的before和after偽元素參與布局

  <ul class="share-list">        <li class="share-item"></li>        <li class="share-item"></li>        <li class="share-item"></li>    </ul>

.share-list{      display: flex;      justify-content: space-between;  }  .share-list:before,  .share-list:after{      content: "";  }  .share-item{      width: 60px;      height: 60px;  }

絕對定位

1、計算各個位置，第一個位置為25% – 60px75%，第二個為50% – 60px 50%，第三個位置為75% – 60px*25%

這裡就不再多講，根據上面的間隙寬度計算公式總會算出來的，可能一開始想錯了，調整下就對了。

最終的計算公式為：（假設n為間隙數，w為圖標的寬度）

第i圖標的位置為: i/n (%) – w(n-i)/n (px)，結合left和transform表示就是

left: i/n*100%;  transform: translate( -(n-1)/n*100%,0);

float方法

1、設置第二個為絕對定位在中間；第一個的寬度為50%，padding-right為30px，第二個的寬度為50%，padding-left為30px，然後裏面居中

.share-item:nth-child(2){      position: absolute;      left: 50%;      transform: translate(-50%, 0);      width: 60px;  }  .share-item:nth-child(1),  .share-item:nth-child(3){      float: left:      width: 100%;      text-align: center;      box-sizing: border-box;  }  .share-item:nth-child(1){      padding-right: 30px;  }  .share-item:nth-child(3){      padding-left: 30px;  }  .item-inner{      display: inline-block;      vertical-align: middle;  }

table方法

設置table-layout:fixed，第二個td為60px，那麼第一個和第三個自動等分剩餘的空間，然後再單元格居中即可

總結

這個問題，其實所有的人都能解答（請忽略有點嘩眾取寵的文章標題），只是答題運用的方法不同而已，有靈活的，有死板的，最關鍵的還是我們對遇到問題怎麼對應上自己的知識庫。

關鍵問題不是你實現不了，而是你選擇的方案可能不是最優的，這就是css，你了解越多，你就會越接近那個最優的捷徑。