一个等间距的三个圆圈

Question

我有一个设计，我试图在HTML和CSS中复制。

此时此刻，我可以在fiddle中获得此信息。

我想知道如何在我的小提琴中如何能够将上述三个圆圈连续排列在一起，正如设计中所示。我试过用，

<span class="circle"></span>

.circle:before {
  content: ' \25CF';
  font-size: 200px;
}

和

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

但不幸的是，我无法在上面的小提琴中获得相同的设计。

Answer 1

你真的不需要以前：只需将事物设置为display: block;

即可

.circle {
  display: block;
  height: 100px;
  width: 100px;
  background: red;
  border-radius: 100%;
}

https://jsfiddle.net/Lh5m11ya/2/

Answer 2

您可以使用css：

创建圈子

.circle {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin: 0 auto;
}

并为每个人设置相关的颜色：

.circle.purple {
  background: purple;
}
.circle.orange {
  background: orange;
}
.circle.green {
  background: green;
}

以下是基于你的jsfiddle的修复：
https://jsfiddle.net/Lh5m11ya/3/embedded/result/

Answer 3

这是一个基于弹性框的方法：https://jsfiddle.net/z2s8zq72/

放置一个带有display flex和一些config的容器类：

.item-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

此jus将其定义为柔性显示，方向将其设置为从上到下显示项目，然后对齐中心的所有内容。

和圈子一样：

.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.circle.red {
  background: #f00;
}
.circle.green {
  background: green;
}
.circle.blue {
    background: blue;
}

并在html中：

<div id="healthy" class="col-lg-4 item-container">
     <div class="circle blue"></div>
     <h3>title</h3>
     <p>text.</p>

</div>