如何調整一個伸縮性醇和固定容器

Question

內的絕對塊i有一個父容器具有.secondary-NAV纏繞CSS

.secondary-nav-wrap { 
    margin: 30px 0; 
    position: relative; 
} 

它包含具有醇可變裏的和絕對定位的div。進口-26具有CSS代碼

position: absolute; 
top: 0; 
right: 0; 

現在，當有三華里的一切都很好

但是當李增大到5或6（最大）數量，進口格重迭於李即

我想實現這樣的設計，其中黃色DIV相應地自動將自身定位。

我如果黃格溢出了父DIV的完全沒問題

編輯：

代碼裏是

.primary-nav li, .secondary-nav li { 
float: left; 
text-align: center; 
list-style: none; 
max-width: 190px; 
} 

代碼醇是

.primary-nav, .secondary-nav { 
display: inline-block; 
margin-right: auto!important; 
margin-left: auto!important; 
position: relative; 
margin-top: 0; 
margin-bottom: 0; 
} 

黃色DIV + CSS代碼

.import-26-as { 
position: absolute; 
top: 0; 
right: 0%; 
font-family: "Source Sans Pro",Helvetica,Arial; 
font-size: 12px; 
color: #4c4725; 
height: 34px; 
overflow: hidden; 
-moz-transition: height 150ms ease-out; 
-o-transition: height 150ms ease-out; 
-webkit-transition: height 150ms ease-out; 
transition: height 150ms ease-out; 
} 

父DIV被包裹的容器內的div使用CSS

.container { 
width: 950px; 
margin: 0 auto; 
} 

Answer 1

有是選項。
1.你可以使用一個表格（甚至模仿display屬性爲table爲父母，table-cell爲ol和內部div）。
2.您可以給內divdisplay: inline-block和float: right。
無論哪種方式，你都不需要絕對定位。

UPD：對於table方法，here的答案是關於如何給出最大寬度爲ol。它適用於display: table-cell。

Answer 2

另一種選擇是數量查詢。我已經添加了最小3和最大6的CSS代碼。您可以通過添加/刪除二級li來檢查它。你可以微調我的代碼，我只是創建它進行測試。

CSS

.container { 
    width: 950px; 
    margin: 0 auto; 
    font-family: arial; 
    font-size: 12px; 
} 
.primary-nav-wrap ol{ 
    list-style: none; 
    margin: 0 0 20px 0; 
} 
.primary-nav-wrap ol li { 
    display: inline-block; 
    padding: 19px; 
    width: 111px; 
    background-color: aliceblue; 
    text-align: center; 
} 
.secondary-nav { 
    margin: 0; 
    width: 700px; 
} 
.secondary-nav li { 
    float: left; 
    text-align: center; 
    list-style: none; 
    width: 190px; 
    background-color:#999999; 
    padding: 20px; 
    border-bottom: 10px solid #7A7EF1; 
} 
ol.secondary-nav li:nth-last-child(n+4), ol.secondary-nav li:nth-last-child(n+4) ~ li { 
    max-width: 145px; 
    padding-left: 15px; 
    padding-right: 15px; 
} 
ol.secondary-nav li:nth-last-child(n+5), ol.secondary-nav li:nth-last-child(n+5) ~ li { 
    max-width: 120px; 
    padding-left: 10px; 
    padding-right: 10px; 
} 

ol.secondary-nav li:nth-last-child(n+6), ol.secondary-nav li:nth-last-child(n+6) ~ li { 
    max-width: 105px; 
    padding-left: 5px; 
    padding-right: 5px; 
} 
.import-26-as { 
    width: 200px; 
    background: yellow; 
    float: right; 
} 
.import-26-as a { 
    font-family: "Source Sans Pro",Helvetica,Arial; 
    font-size: 12px; 
    color: #4c4725; 
    height: 34px; 
    display: block; 
    text-align: center; 
    padding-top: 10px; 
} 

HTML

<div class="container"> 
     <div class="primary-nav-wrap"> 
      <ol class="primary-nav"> 
       <li><span class="test">link 1</span></li> 
       <li><span class="test">link 2</span></li> 
       <li><span class="test">link 3</span></li> 
       <li><span class="test">link 4</span></li> 
       <li><span class="test">link 5</span></li> 
       <li><span class="test">link 6</span></li> 
      </ol> 
     </div> 
     <div class="secondary-nav-wrap"> 
      <ol class="secondary-nav"> 
       <li><span class="test">A. test test 1</span></li> 
       <li><span class="test">B. test test 2</span></li> 
       <li><span class="test">C. test test 3</span></li> 
       <li><span class="test">D. test test 4</span></li> 
       <li><span class="test">D. test test 4</span></li> 
      </ol> 
      <div class="import-26-as"><a href="">other link</a></div> 
     </div> 

    </div>