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，解决了问题。

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

1 个答案: