как выровнять много, т.е.

Question

<div class="container">
  <div id="menu">
    <div style="width:100%;height:400px;">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
      <img src="images/king.jpg" style="float:left;width:50%;height:50%;display:inline-block;margin:5px 20px;padding:5px; border:1px solid #CCC">
    </div>
  </div>
</div>

Как выровнять изображения более 12, чтобы я шел рядом и снизу тоже.Я хочу отображать 12 изображений рядом, а также ниже или выше. Я хочу отображать 12 изображений в одном делении высотой 500px и шириной 300px, и в этом разделе я хочу отображать 12 изображений рядом, а также ниже.заранее спасибо