如何创建矩形形状的圆形图像？ 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>

让我知道，如果现在为你工作。