Mastermind游戏的html / css布局

Question

我正在使用html / js制作一个Mastermind游戏，我几乎得到了我的目标布局，除了A点和B点，见下图：

http://jsfiddle.net/5Saxg/

答：将hintpegs布局为目标布局的最佳方法是什么，所以它们显示在两行而不是一行上？我的意思是，所以他们在目标布局中显示出来。我试过在html中使用了一个，所以就像这样

<div class="hintcontainer">
  <div class="hintpeg"></div>
  <div class="hintpeg"></div><br/>
  <div class="hintpeg"></div>
  <div class="hintpeg"></div>
</div>

然后它跳得太厉害了。当有3或5个hintpegs时，最好的方法是让它“跳入”一点点？所以它更像是蜂窝状图案而不是网格。我尝试过使用SPAN元素：

<div class="hintcontainer">
  <div class="hintpeg"></div>
  <div class="hintpeg"></div><br />
  <span style="margin-left: 10px;"><div class="hintpeg"></div></span>
  <div class="hintpeg"></div>
</div>

但是这不起作用，除了我必须添加很多span元素之外，我宁愿使用css，因为这会更容易在游戏中管理。

B：我想在播放器选择颜色时添加指示符的最佳方式是什么，循环显示所有颜色。它就像是底部钉子上方的一个小矩形。实现这一目标的最佳方法是什么？