专栏首页腾讯NEXT学位这个CSS问题屏幕前的你是否熟悉,然后懵逼,最后放弃

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

当决定写这篇博文时候,突然一道闪电从脑海劈过,于是临时决定将这个熟悉然后到懵逼最后到放弃的问题分为两部分。

第一部分为抛出问题,诚邀各路英雄豪杰解答;

第二部分为一些示范解答。

闲话少说,直接上题:

要求如下:

  • 1.三个橙色圆的大小为60px,固定不变
  • 2.所有间隙相等,也就是被三个橙色圆划分成的四个间距相等
  • 3.应用在移动端,整个黄色为全屏宽度(所以这里图片的大小不是真实的大小,如iphone 5那就是320px,6就是375px,6s就是 414px等等)
  • 4.兼容安卓4.0以上(悄悄透露下安卓4.3- 属性calc不支持)
  • 5.html & css (no js)

·方法不唯一,欢迎大家把自己解决方案分享到评论区

答案分割线

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-block0;
    vertical-align: middle;
}

table方法

设置table-layout:fixed,第二个td为60px,那么第一个和第三个自动等分剩余的空间,然后再单元格居中即可

总结

这个问题,其实所有的人都能解答(请忽略有点哗众取宠的文章标题),只是答题运用的方法不同而已,有灵活的,有死板的,最关键的还是我们对遇到问题怎么对应上自己的知识库。

关键问题不是你实现不了,而是你选择的方案可能不是最优的,这就是css,你了解越多,你就会越接近那个最优的捷径。

关于这个题目,你的CSS功力是否经得住考验呢?

所以前端的路上,需要不断学习系统先进的前端知识,了解业界的顶尖标准,不断自我进步......不论是巩固基础还是进阶充电,都需要保持进步的驱动力

本文分享自微信公众号 - 腾讯NEXT学位(NextDegree),作者:IMWEB·结一

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-12-20

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 提升代码可读性的 10 个技巧

    腾讯NEXT学位
  • 怎样让开源项目看起来“高大上”

    腾讯NEXT学位
  • 抱歉,我也不想删库

    ? 试想一下,作为程序员因为个人操作问题,导致众多用户手机数据被删,会是什么感受? 反正小E光是想想就觉得窒息。 ? 然而最近,令人窒息的事情真的发生了。 安...

    腾讯NEXT学位
  • 这个问题你应该很熟悉,然后懵逼,然后放弃

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

    IMWeb前端团队
  • 这个问题你应该很熟悉,然后懵逼,然后放弃

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

    IMWeb前端团队
  • 【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第八节)

    剽悍一小兔
  • 滑动头部固定,要不也了解下?

    最近公司事情比较少,正好早上有人问我那个滑动粘着头部不动的怎么实现,我想了半天,前几天刚刚写过,那就记录一下咯。于是,女朋友送了我一张图

    IMWeb前端团队
  • 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为...

    书童小二
  • python数组遍历三种实用方法

     >>> os.__file__.split('\\') ['E:', 'Python', 'Python25', 'lib', 'os.pyc'] >>> ...

    py3study
  • django博客rss输出代码分享

    今天有朋友问到我博客的rss输出是怎么做的,直接用django文档上的步骤输出的rss不能直接被chrome解析。

    the5fire

扫码关注云+社区

领取腾讯云代金券