对齐DIV顶部同级底部的div

Question

我要放置dropdownContainer的inputContainer下方，但没有dropdownContainer被内autocompleteContainer包裹。

当滚动时，dropdownContainer应与inputContainer一起移动。当令牌div被删除或添加时相同。

如果我删除位置：从它正确对齐dropdownContainer绝对的，但似乎里面autocompleteContainer

我宁愿做没有JS/jQuery的，但如果没有其他的选择，我会使用它。

这里有一个codepen链接：http://codepen.io/rishadjb/pen/LRxzpN

谢谢。

.mainContainer{ 
 
    width:700px; 
 
    position: relative; 
 
} 
 
.autocompleteContainer{ 
 
    background: none repeat scroll 0 0 #ececec; 
 
    float: left; 
 
    width: 100%; 
 
/* height:60px; */ 
 
    max-height: 100px; 
 
    z-index: 1; 
 
    padding: 4px 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    cursor: text; 
 
    text-align: left; 
 
    background-color: #e4e4e4; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 

 
.token{ 
 
     background-color: #f7982f; 
 
    border-radius: 10px; 
 
    color: #fff; 
 
    display: flex; 
 
    font-family: sans-serif; 
 
    font-size: 13px; 
 
    font-weight: 400; 
 
    margin: 2px; 
 
    padding: 2px 5px; 
 
} 
 

 
.inputContainer{ 
 
     flex-grow: 1; 
 
    position:relative; 
 
} 
 

 
.autoCompleteInput{ 
 
     border: medium none; 
 
    outline: none; 
 
    width: 100%; 
 
    padding: 2px 12px; 
 
    background: transparent; 
 
    color: #008cc1; 
 
} 
 

 
.dropdownContainer{ 
 
    height:60px; 
 
    width:100%; 
 
    position:absolute; 
 
    background:red; 
 
    z-index:999; 
 
    border:1px solid blue; 
 
}

<div class="mainContainer"> 
 
    <div class="autocompleteContainer"> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    
 
    <div class="inputContainer"> 
 
     <input class="autoCompleteInput" value='inputText'/> 
 
    </div> 
 
    
 
    <div class="dropdownContainer">Dropdown Container</div> 
 
    
 
    
 
    </div> 
 
</div>

Answer 1

是否.autocompleteContainer有浮动？如果删除声明，那么所有你需要做的是增加dropdownContainer：

.dropdownContainer{ 
    left: 0; 
    top: 100%; 
}