Question

下面是我所做的代码，我创建了一个四个圆圈。我想要在同一行的四个圆圈中留出一些空间，但我没有得到。四个圆圈紧紧相连，如何在这个问题上创造出相等的空间。

使用bootstrap col-lg-4，我得到了我想要的结果，但是仍然没有bootstrap。如果是，请回复我。

.circle{
width:10%;
height: 20%;
border-radius: 50%;
background:blue;
color:white;
text-align:center

}

.circle:after{
content: '';
padding-bottom:100%
display:block;

}
span{
position: absolute;
top: 10%;
margin-top: -20px;
margin-left:-40px;
font-size:2opx;

}
.row{
display: flex;
flex-direction: row;
}

<body>
<div class="row">
<div class="circle">
<span>
13<br>
Affiliation
</div>

<div class="circle">
<span>
12700<br>
courses
</div>

<div class="circle">
<span>
512<br>
Instruction
</div>

<div class="circle">
<span>
12500<br>
Learner
</div>
</div>
</body>

Answer 1

justify-content: space-between;是您要寻找的东西，将其添加到.row中，它将使圆之间的间距相同。

.circle {
  width:60px;
  height: 60px;
  border-radius: 50%;
  background:blue;
  color:white;
  text-align:center;
}

.circle:after {
  content: '';
  padding-bottom:100%
  display:block;
}

span {
  font-size: 15px;
  margin-top: 10px;
  display: block;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div class="row">
    <div class="circle">
        <span>
13<br>
Affiliation</span>
    </div>

    <div class="circle">
        <span>
12700<br>
courses</span>
    </div>

    <div class="circle">
        <span>
512<br>
Instruction</span>
    </div>

    <div class="circle">
        <span>
12500<br>
Learner</span>
    </div>
</div>

Answer 2

    .circle-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    
    .circle{
      display: inline-block;
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: blue;
        color: white;
        text-align: center;
    }
    
    .text {
      position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        display: flex;
        align-items: center;
    }
    
    .circle:after{
    content: '';
    padding-bottom:100%
    display:block;
    
    }
    span{
    font-size: 2opx;
    width:100%;
    }

    <div class="circle-row">
    <div class="circle">
      <div class="text">
        <span>
      13<br>
      Affiliation</span>
      </div>
    </div>
    
    <div class="circle">
     <div class="text">
      <span>
      12700<br>
      courses</span>
    </div>
    </div>
    
    <div class="circle">
     <div class="text">
    <span>
    512<br>
    Instruction</span>
    </div>
    </div>
    
    <div class="circle">
     <div class="text">
    <span>
    12500<br>
    Learner</span>
    </div>
    </div>
    </div>

为您的代码应用justify-content: space-between;。

尝试此。.无需引导即可工作。

给圆等距的间隔

2 个答案: