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

自行脑补
  • 1k

网上做的一道题:请用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平分宽度,左右两边的间距只是中间两个间距的一半长,如何解决这个问题呢?

回复
阅读 9.3k
9 个回答

clipboard.png


#d {
    width: 100%;
    height: 200px;
    background: #000000;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
    貌似这样也可以
    
    .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>
    
    

谢邀!两种方案都可以,
第一种用弹性布局的属性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;保证固定不变

樊思雨
  • 302
    <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不行,只有火狐可以,我只试了单一版本的,不同版本浏览器可能有差异,支持率不是很好,对浏览器版本有要求

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

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

王能全是谁
  • 1.1k

给出一个兼容性好一些的办法,利用伪元素和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;
}
1 篇内容引用
宣传栏