長方形の円形イメージを作成する方法は？ CSS

Question

は私が円形画像の下の項目のリストを追加しようとしていると、次は何が起こっている：

私は項目が互いに整列することにしたいです。 誰かがそれを修正する方法を知っていますか？ 項目がコンテナ内であり、それらのそれぞれは、以下のdisplay: inline-block

を持ってここで参照するためのコードです：

*{ 
 
    align-items: center; 
 
\t align-content: center; 
 
\t text-align: center; 
 
\t height: 100%; 
 
\t margin-top: 0px; 
 
} 
 
.container > div { 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t width: 33.3%; 
 
} 
 

 
#myImage { 
 
\t width: 70%; 
 
\t border-radius: 50%; 
 
\t -webkit-box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75); 
 
\t -moz-box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75); 
 
\t box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75); 
 
}

<img src="images/twitter.png" id="myImage"> 
 

 
     <div class="container"> 
 
     <div>a</div> 
 
     <div>b</div> 
 
     <div>c</div> 
 
     </div>

Answer 1

私は左とそれが右隣に座っているように見えるフロートを追加しました今すぐお互いに。コンテナクラスの下のdivの周りにパディング/マージンを追加して、上から間隔を置くことができます。

 *{ 
 
      align-items: center; 
 
     \t align-content: center; 
 
     \t text-align: center; 
 
     \t height: 100%; 
 
     \t margin-top: 0px; 
 
     } 
 
     .container > div { 
 
     \t display: inline-block; 
 
     \t vertical-align: top; 
 
     \t width: 33.3%; 
 
      float:left; 
 
     } 
 
     
 

 
     #myImage { 
 
     \t width: 70%; 
 
     \t border-radius: 50%; 
 
     \t -webkit-box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75); 
 
     \t -moz-box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75); 
 
     \t box-shadow: 0px 13px 14px 0px rgba(0,0,0,0.75); 
 
     }

 <img src="images/twitter.png" id="myImage"> 
 

 
       <div class="container"> 
 
       <div>a</div> 
 
       <div>b</div> 
 
       <div>c</div> 
 
       </div>

そのは今、あなたのために働いている場合、私に教えてください。