问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
自行脑补
    1k54058

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

    htmlcss面试
    阅读 11.3k
    9 个回答
    得票最新
    头像
    守候
      18.6k3936

      clipboard.png

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

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

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

            头像
            micherwa
              5.4k1719

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

              头像
              Xeira
                4.1k2717
                头像
                HEternally
                  89929

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

                  头像
                  王能全是谁
                    1.1k1614

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