排列图像在一个圆圈

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是现场演示。