Как выровнять 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, чтобы он мог расширяться, чтобы заполнить пространство, не искажая круги.

/*--- 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;
}

<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>