2017-03-13 184 views
0

我想添加一個圓形圖像所指項目的列表和下面發生的事情:如何創建矩形形狀的圓形圖像? CSS

problem

我想要的物品相互對齊。 有誰知道如何解決它? 的項目是一個容器內,他們每個人都有以下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>

回答

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>

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

+0

它的工作!謝謝,朋友:) –

+0

沒問題,很高興聽到這就是你以後。 – Syfer