どのように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を取得するために管理しています。しかし、3つ目（私は他の2の前と後に複製しました）は何らかの理由で表示されませんか？

また、それらは等間隔ではありません - どのように等間隔に配置することができますか？

NOTEを助けてください：ちょうど可視性の理由から、赤い丸がある画像の代わりに。

Answer 1

ないコンテナ上、画像にその人自身をfloat: leftを適用します。いくつかの他のdiv

で

1. ラップ円は彼らを作る：あなたの2つ目の質問に答えるために

   /*--- 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{ 
    
   \t left: 15%; 
    
   \t width: 70%; 
    
   /* \t float: left; */ 
    
   \t height: 300px; 
    
   \t position: relative; 
    
       }

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

   幅はあるパーセンテージの値になり、左に浮動小数点になります

2. サークル数を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>