css - 如何在高度变化时调整 div 相对于其上方 div 的位置？

Question

我正在使用 selectize.js在表单的多个输入字段中。

添加标签时，输入框的高度会相应增加。

然而下面的容器并没有相应地调整它的垂直位置。

在官方演示中，正在发生所需的行为，可以通过以下方式看到:

http://brianreavis.github.io/selectize.js/

然后向下滚动并单击 Plugins，然后滚动到 drag_drop 演示。

然而在我的实现中它不是:

jsFiddle

http://jsfiddle.net/rwone/q84VX/4/

我已经尝试使包含的 div，.field-row 成为相对的，但这似乎没有效果。

HTML

<div class="my_form_page_content">
<form id="my_form_name" name="my_form_name">
    <div class="my_form_container">
    <div class="field-row" >
        <div class="my_form_left">
        <p>field one</p>
        </div>
        <div class="my_form_right">
        <div class="input_wrapper">
            <input  type="text" id="input-sortable-1" class="input-sortable demo-default" value="input 1 value, lala1, lala1a" />
        </div>
        </div>        
    </div>
    <div class="field-row" > 
        <div class="my_form_left">
        <p>field two</p>
        </div>
        <div class="my_form_right">
            <div class="input_wrapper">
            <input  type="text" id="input-sortable-2" class="input-sortable demo-default" value="input 2 value, lala2, lala2a" />
            </div> 
         </div> 
    </div>
    <div class="my_form_button">
        <button type="submit">submit</button>
    </div>
   </div>
</form>
</div>

CSS

.my_form_page_content {
width: 300px
}
.my_form_container {
width: 550px; 
margin-top:45px; 
margin-left:13px;
background: #cccccc;
}
.my_form_left {
width:105px; 
display: inline;
float:left;
background: yellow;
}
.my_form_left p {
font-family:arial; 
font-size:10px; 
margin-top: 6px; 
margin-bottom:20px; 
color:#000000 !important
}
.my_form_right{
display:inline;
float: left;
}
.my_form_right input {
width: 186px; 
height: 25px; 
border: 2px solid #e4e4e4; 
border-radius: 6px; 
margin-bottom:12px;
outline: none;
color: #999999;
padding-left:5px;
}
.my_form_button button {
float:right; 
background: none repeat scroll 0 0 #333333; 
border: 2px solid #a8a8a8; 
border-radius: 6px; 
width: 195px; 
cursor: pointer; 
font-size: 15px; 
color: #ffffff; 
padding-top: 3px; 
padding-bottom: 1px;
margin-top: 100px;
position: absolute;
}
/* selectize css here */
.field-row {
width:100%;
height:auto;
float:left;
margin-bottom:10px;
border:1px solid green;
padding:10px;
cursor: move;
}

Answer 1

出于某种原因，我的实现与默认的不同之处在于:

https://github.com/brianreavis/selectize.js/blob/master/dist/css/selectize.default.css#L126

并且是:

.selectize-control {
    position: absolute;
}

将其切换为position:relative，问题就解决了。