這個CSS問題屏幕前的你是否熟悉，而後懵逼，最後放棄

時間 2019-11-17

標籤這個 css 問題屏幕是否熟悉而後最後放棄欄目 CSS 简体版

原文原文鏈接

本文做者：IMWeb·結一原文出處：IMWeb社區 未經贊成，禁止轉載
css

當決定寫這篇博文時候，忽然一道閃電從腦海劈過，因而臨時決定將這個熟悉而後到懵逼最後到放棄的問題分爲兩部分。html

閒話少說，直接上題：前端

要求以下：web

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

方法不惟一，歡迎你們把本身解決方案分享到評論區
bash

答案分割線————

1、flex方法

一、插入四個空標籤，設置flex:1，這個多是你們最早想到的。iphone

<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%;
}
複製代碼

二、第一個和第三個設置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;
    margin-left: auto;
    margin-right: auto;
}
複製代碼

三、對justify-content: space-between;進行變通佈局

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

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

<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: 25%;
}
.share-list{
    display: flex;
    margin-left: -45px;
    margin-right: -45px;
    justify-content: space-between;
}
複製代碼

四、高級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;
}複製代碼

2、絕對定位

計算各個位置，第一個位置爲25% - 60px

75%，第二個爲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);複製代碼

3、float方法

設置第二個爲絕對定位在中間；第一個的寬度爲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;
}複製代碼