这个问题你应该很熟悉,然后懵逼,然后放弃

今天早晨决定写这篇博文,但是晚上回家的时候,突然一道闪电从脑海劈过,于是临时决定将这个熟悉然后到懵逼最后到放弃的问题分为两部分。第一部分为抛出问题,诚邀各路英雄豪杰解答;第二部分为解答,就是一周之后会给出我的答案。

闲话少说,直接上题:

要求如下:

  • 三个橙色圆的大小为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,你了解越多,你就会越接近那个最优的捷径。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

【一文打尽】SQL 数据分析常用语句.....收藏

• 1 基础查询 • 2 字符串\数字\日期时间 • 3 聚合数据查询 • 4 子查询 • 5 联接\组合查询 • 6 高级查询 • 7 更新数据 阅读提醒:点...

38510
来自专栏程序员互动联盟

【一起学python】print 语句

联盟有个小伙伴,为了督促自己学习进步,决定把自己以前学的python重新梳理下,并且以文章的方式展示出来,联盟专门做一起学python系列专栏,鼓励这位小伙伴学...

3427
来自专栏余林丰

工厂模式——简单工厂模式

工厂模式分三类:简单工厂模式、工厂方法模式、抽象工厂模式。 首先介绍比较简单一种工厂模式——简单工厂模式。 我们以计算器作为一个例子来说明工厂模式到底是什么。作...

1906
来自专栏小红豆的数据分析

小蛇学python(8)pandas库之DataFrame

有数据的地方就有表格。无论是异常值处理,清除缺省值,还是增删改查,无论是csv还是mysql等各种数据库,无不是以表格的形式存储数据。表格在数据中成为了一个绕不...

982
来自专栏葡萄城控件技术团队

C# 8.0的三个值得关注的新特性

1093
来自专栏数说工作室

统计师的Python日记【第十天:数据聚合】

本文是【统计师的Python日记】第10天的日记 回顾一下: 第1天学习了Python的基本页面、操作,以及几种主要的容器类型。 第2天学习了python的函数...

4468
来自专栏CSDN技术头条

改变开发者编码思维的六种编程范式

译者注:本文介绍了六种编程范式,提到了不少小众语言,作者希望借此让大家更多的了解一些非主流的编程范式,进而改变对编程的看法。以下为译文: 时不时地,我会发现一些...

27710
来自专栏编程

C语言最难啃的三块硬骨头,你越过去了吗?

提到C语言很多初学者都觉得,学到中间就进行不下去了,因为碰到了几个硬骨头死活翻不过去,于是很多人给C语言下结论太难了,太靠近底层了,特别是那几块难啃的骨头,直接...

1878
来自专栏腾讯NEXT学位

这个CSS问题屏幕前的你是否熟悉,然后懵逼,最后放弃

3506
来自专栏Python爬虫实战

设计模式:简单工厂模式

简单工厂模式又称静态工厂方法(Static Factory Method)模式,它不是Gof 所讲的23种设计模式之一,但是它却是我们在编码过程中经常使用的方法...

491

扫码关注云+社区