使用CSS創建響應式子導航項目

我必須創建基於在Photoshop中創建的樣機設計的導航。該樣機目前看起來是這樣的：使用CSS創建響應式子導航項目

enter image description here

我已經成功地創建主通航點，現在我面臨的一些問題與子導航。它應該是響應式的，這意味着子導航中項目的最大數目應該是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>

所有提示都感激！謝謝。

來源

2013-07-25 doonot

「是否有可能用CSS來定位一個元素彼此相鄰自動？」你指的是哪些元素？ – user1477388

Lövenstube，Bistro，Verdana等。這些是sigle子導航元素。 – doonot

你可以用你已經試過的CSS發佈一個JSFiddle嗎？ – Wex

浮動.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; 
}

來源

2013-07-25 17:14:54 hungerstar

使用CSS創建響應式子導航項目

回答

相關問題