对齐DIV顶部同级底部的div
问题描述:
我要放置dropdownContainer
的inputContainer
下方,但没有dropdownContainer
被内autocompleteContainer
包裹。对齐DIV顶部同级底部的div
当滚动时,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>
答
是否.autocompleteContainer
有浮动?如果删除声明,那么所有你需要做的是增加dropdownContainer
:
.dropdownContainer{
left: 0;
top: 100%;
}
我试过,但它对准dropdownContainer到autocompleteContainer,而不是inputContainer的底部。 Codepen:https://codepen.io/rishadjb/pen/Kgaygd – fractal5