如何創建矩形形狀的圓形圖像？ 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>

讓我知道，如果現在爲你工作。