下降在父區div與溢出：自動

Question

對於一個項目，我需要創建一個視圖，其中一個下拉菜單是在父div的底部。短小提琴這裏：http://jsfiddle.net/Gruck/6owhaa63/，其中「移動到」項打開一些更多的選擇，在此樣機

<div class="job"> 
    <div class="job-main"> 

     <div class="title"> 
     some content 
     </div> 
     <div class="counters"> 
     some other content 

     </div> 

    </div> 
    <div class="ops"> 
     <ul> 
     <li><a href="#">edit</a></li> 
     <li><a href="#">visualize</a></li> 
     <li><a href="#">move to</a> 
      <ul class="move-to"> 
      <li>folder a</li> 
      <li>folder b</li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 

而且一些CSS

.job { 
    border-style: solid; 
    border-color: #F2F2F2; 
    border-width: 2px; 
    background-color: #FFFFFF; 
    overflow: auto; 
} 

.job-main { 
    border-bottom: 1px solid #F2F2F2; 
    overflow: hidden; 
} 

.title { 
    width: calc(100% - 390px); 
    height: 100px; 
    float: left; 
    min-width: 300px; 
    padding:10px; 

    background-color: #EE0000; 
} 

.counters { 
    width: 362px; 
    height: 80px; 
    padding: 20px 0px 20px 0px; 
    float: right; 

    background-color: #00EE00; 
} 

如何獲得要顯示的選項如圖所示在父div的頂部？反正有沒有這樣做，但保持在div內的選項？

我想我將不得不將選項移到父div和mannualy之外的位置，但是我想確保我不會錯過更好的方法來做到這一點。

感謝您的任何想法，你可能會提供:) 乾杯

Answer 1

我認爲只有這樣，才能做到這一點保持它在父DIV是調整它的高度，使列表中的項目將是可見的。

如果你改變它是父DIV外

，似乎仍然在小提琴正確佈局：

<div class="job"> 
    <div class="job-main"> 

    <div class="title"> 
     some content 
    </div> 
    <div class="counters"> 
     some other content 

    </div> 

    </div> 

</div> 
<div class="ops"> 
    <ul> 
    <li><a href="#">edit</a></li> 
    <li><a href="#">visualize</a></li> 
    <li><a href="#">move to</a> 
     <ul class="move-to"> 
     <li>folder a</li> 
     <li>folder b</li> 
     </ul> 
    </li> 
    </ul> 
</div> 

小提琴：http://jsfiddle.net/6owhaa63/2/