如何对齐3个圆形图像？

Question

所以我有这段代码：

/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
 width: 200px;
 height: 200px;
 background-size: cover;
 display: block;
  border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 float: left;
 background: red;
}
.img-circular1{
   background-image: url('/Images/learn.jpg');
}
.img-circular2{
   background-image: url('/Images/watch.jpg');
}
.img-circular3{
   background-image: url('/Images/practice.jpg');
}
#container1
{
top: 100px; 
    position: relative;
    margin-left:auto;
    margin-right:auto;
    width:70%;
    background-color: green;
    overflow: auto;
    bottom: 0;
}

<div id="container1" style="padding-bottom: 500px;">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
<div class="img-circular1"></div>
</div>

我没有设法将其中的2个显示在绿色框中。但第三个（我在其他2个之前和之后重复）将不会出于某种原因显示？

此外，它们不是等距离的 - 我怎样才能使它们相等间距？

请帮忙

注意：仅出于可见性原因，而不是图像有红色圆圈。

Answer 1

在图像上应用float: left，而不是在容器上：

/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
 /*width: 200px;*/
 /*height: 200px;*/
 width: 100px;
 height: 100px;
 background-size: cover;
 display: block;
  border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 float: left;
}
.img-circular1{
   background-image: url('/Imageslearn.jpg');
   background: #aaa; /*added to as an alternative to image*/
}
.img-circular2{
   background-image: url('/Images/watch.jpg');
   background: #aaa; /*added to as an alternative to image*/
}
.img-circular3{
   background-image: url('/Images/practice.jpg');
      background: #aaa; /*added to as an alternative to image*/
}
.container1{
	left: 15%; 
	width: 70%; 
/* 	float: left;  */
	height: 300px;
	position: relative; 
  }

<div class="container1">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
</div>

回答你的第二个问题：

1. 在其他div中包装圈子
2. 使它们的宽度为某个百分比值并将它们向左浮动
3. 将圆圈上的边距设置为margin: 0 auto。

以下是您要学习的原型：

#green {
  background: green;
  padding: 10px;
  overflow: auto;
}

#blue {
  background: blue;
  width: 50%;
  float: left;
  border: 1px solid #fff;
  box-sizing: border-box; /*good for when there is border or padding*/
}

#red {
  background: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
}

<div id="green">
  <div id="blue">
    <div id="red"></div>
  </div>
  <div id="blue">
    <div id="red"></div>
  </div>
  <div id="blue">
    <div id="red"></div>
  </div>
  <div id="blue">
    <div id="red"></div>
  </div>
</div>

Answer 2

我更新了您的代码以使用FlexBox。由于您希望您的圈子在行中间隔相等，float: left不会有太大帮助。我不得不在每个圆形div周围添加一个包装div，以便它可以扩展以填充空间而不会扭曲圆圈。

＆＃13;

＆＃13;

/*--- Circular images --- */

.img-circular1,
.img-circular2,
.img-circular3 {
  width: 200px;
  height: 200px;
  background-size: cover;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  background: red;
  display: block;
  margin: 0 auto;
}

.img-circular1 {
  background-image: url('/Images/learn.jpg');
}

.img-circular2 {
  background-image: url('/Images/watch.jpg');
}

.img-circular3 {
  background-image: url('/Images/practice.jpg');
}

#container1 {
  top: 100px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  background-color: green;
  overflow: auto;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.wrap {
  flex-grow: 1;
}

＆＃13;

<div id="container1" style="padding-bottom: 500px;">
  <div class="wrap">
    <div class="img-circular1"></div>
  </div>
  <div class="wrap">
    <div class="img-circular2"></div>
  </div>
  <div class="wrap">
    <div class="img-circular3"></div>
  </div>
  <div class="wrap">
    <div class="img-circular1"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;