직사각형 모양의 원형 이미지를 만드는 방법은 무엇입니까? 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>

는 지금 당신을 위해 작업을 알려줘.