一个div如何被三个内部div划分出四个等间距？用纯css,html

发布于 2022-09-05 21:21:11 字数 1098 浏览 18 评论 0

网上做的一道题：请用html和css实现以下效果（移动设备），要求①三个圆形icon大小为80px，固定不变，②被三个圆形icon划分的四个间距相等，③黑色背景需要占满移动设备的宽度
图片描述

我一开始的代码是这样的：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
#d{
  width:100%;
  height:200px;
  background:#000000;
  display: flex;
  justify-content:space-around;
  align-items:center;
}
.icon{
  width:80px;
  height:80px;
  background:#ffffff;
  border-radius:50%;
}
  </style>
</head>
<body>
<div id="d">
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
</div>
</body>
</html>

图片描述
最后发现 justify-content:space-around;只是让三个div平分宽度，左右两边的间距只是中间两个间距的一半长，如何解决这个问题呢？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

菩提树下叶撕阳。 2022-09-12 21:21:12

谢邀！两种方案都可以，
第一种用弹性布局的属性space-evenly

#d{
  width:100%;
  height:200px;
  background:#000000;
  display: flex;
   justify-content: space-evenly;
  align-items:center;
}
.icon{
  flex: 0 0 80px;
  width:80px;
  height:80px;
  background:#ffffff;
  border-radius:50%;
}

第二种css3的calc()

#d{
  width:100%;
  height:200px;
  background:#000000;
  display: flex;
  align-items:center;
}
.icon{
  flex: 0 0 80px;
  margin-left: calc((100% - 240px)/4);
  width:80px;
  height:80px;
  background:#ffffff;
  border-radius:50%;
}

最后就是子元素都要加上flex: 0 0 80px;保证固定不变

回复收藏 0

鸢与 2022-09-12 21:21:12

    <style>
        #d {
            width: 100%;
            height: 200px;
            background: #000000;
        }
        
        #c {
            width: 92%;
            height: 200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        .icon {
            width: 80px;
            height: 80px;
            background: #ffffff;
            border-radius: 50%;
        }
    </style>

    <div id="d">

        <div id="c">
            <div class="icon"></div>

            <div class="icon"></div>

            <div class="icon"></div>
        </div>

    </div>

我是在d容器里加了个c，不是很好的办法，但是可以解决
————————————————————————————————————————————————————
看到楼下用justify-content:space-evenly，第一次看到这个，在各个浏览器试一下，
谷歌不行，ie不行，360不行，只有火狐可以，我只试了单一版本的，不同版本浏览器可能有差异，支持率不是很好，对浏览器版本有要求

回复收藏 0

是你 2022-09-12 21:21:12

把4块切出来的部分，也理解成是flex的一个item，与icon相间隔排列，也就是说这里有7个元素。

回复收藏 0

甜点 2022-09-12 21:21:12

justify-content:space-evenly不过IE11不支持这个
https://css-tricks.com/almana...

回复收藏 0

帥小哥 2022-09-12 21:21:12

你可以使用justify-content:space-evenly; 作用是flex 容器起始边缘和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。（注：该属性以前很少看到，原因是以前浏览器不支持，chrome 也是 60 版本之后才支持。延伸一下，align-content:space-evenly 也是这个逻辑，建议在 chrome 60 下查看这个demo 。）

回复收藏 0

没企图 2022-09-12 21:21:12

给出一个兼容性好一些的办法,利用伪元素和space-between

#d {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #000000;
}

.icon {
    width: 80px;
    height: 80px;
    background: #ffffff;
    border-radius: 50%;
}

#d:before {
    content: "";
    display: block;
}

#d:after {
    content: "";
    display: block;
}

回复收藏 0

开始看清了 2022-09-12 21:21:12

这个广告打得好

回复收藏 0

迷荒 2022-09-12 21:21:11


#d {
    width: 100%;
    height: 200px;
    background: #000000;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

回复收藏 0

无人问我粥可暖 2022-09-12 21:21:11

    貌似这样也可以
    
    .container{
      display: flex;
      width: 100%;
      background: #000;
    }
    .item {
      flex: 0 0 80px;
      width: 80px;
      height: 80px;
      margin-left: calc((100% - 240px)/4);
      background: #fff;
      border-radius: 40px;
    }


    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

回复收藏 0

~没有更多了~