排列圖像在一個圓圈

Question

我有六個圖像，我想排列在一個圓圈使用HTML和CSS。圓不應該旋轉或任何類似的東西 - 任何人有任何想法如何做到這一點？

Answer 1

你可以使用相對定位來實現這一目標：

​<div id='box1'>&nbsp;</div> 
<div id='box2'>&nbsp;</div> 
<div id='box3'>&nbsp;</div> 
<div id='box4'>&nbsp;</div> 
<div id='box5'>&nbsp;</div> 
<div id='box6'>&nbsp;</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 
div{ 
    position:absolute; 
    width:20px; 
    height:20px; 
} 
#box1 
{ 
    border:1px solid red; 
    right:50%; 
} 
#box2 
{ 
    border:1px solid purple; 
    top:30%; 
    right:10%; 
} 
#box3 
{ 
    border:1px solid orange; 
    top:30%; 
    left:10%; 
} 
#box4 
{ 
    border:1px solid red; 
    top:60%; 
    right:10%; 
} 
#box5 
{ 
    border: 1px solid green; 
    top:60%; 
    left:10% 
} 
#box6 
{ 
    border:1px solid red; 
    top:90%; 
    right:50%; 
}​ 

的js小提琴這裏：http://jsfiddle.net/E4j2R/

Answer 2

我沒有一個純CSS爲你解決，但是這可能會幫助你。 jQuery解決方案。即使您的圖像超過6張，這也會對您有所幫助。

Here是現場演示。