使用CSS创建响应式子导航项

Question

我必须根据在Photoshop中创建的模型设计创建导航。该模型目前看起来像这样：

我已设法创建主导航点，现在我遇到了子导航的一些问题。它应该是响应式的，这意味着子导航中的最大项目数应为4，最小项目数应为2.是否可以使用CSS将单个元素自动放置在彼此旁边？

这就是我已经拥有的：

<div id="topnavigation">
    <ul>
      <li><a href="#">PORTRAIT</a></li>
      <li id="restaurants"><a href="#" class="active">RESTAURANTS</a></li>
      <li id="restaurants_sub">
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>      
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
      </li>
      <li><a href="#">HOTEL</a></li>
      <li><a href="#">FESTE</a></li>
      <li><a href="#">SEMINARE</a></li>
      <li><a href="#">VERANSTALTUNGEN</a></li>
    </ul>
</div>

所有提示都表示赞赏！ THX。

Answer 1

向左浮动.sub_boxes并在#restaurants_sub上设置最小宽度和最大宽度，只能容纳2-4 .sub_boxes。

http://jsfiddle.net/xBPjP/

CSS中的类似内容

#topnavigation li {
     clear: left;
}
#restaurants_sub {
     max-width: 400px;
}
.sub_boxes {
     width: 100px;
     float: left;
}