根据选择的选择框对齐元素

Question

我将 Twitter Bootstrap 2.3.2 和 chosen plugin 用于选择框。我想问一下如何将其他元素根据框与选定的项目对齐。

在此屏幕截图中，您可以看到两个选择框和选择框下方的内容（元素）。

当我选择一些项目时，框与标题“来源”和框下的项目重叠。我想在选择某些选项时向下对齐元素，并在取消选择选项时向上（向后）对齐项目。

jsfiddle

html

    <div id="filter">

<div id="personFilter" class="form-group">

                    <h4> Person filter </h4>

                    <div id="personFilterContain">

                      <h5> Contain </h5>

                      <select data-placeholder= "address" 
                              name="personContainSelect" multiple class="selectPerson"><option value="0"> </option><option value="2">rogelio.francis@gmail.com</option><option value="3">meredith.sullivan@gmail.com</option><option value="4">essie.castro@gmail.com</option><option value="5">arnold.clayton@gmail.com</option><option value="6">eugene.jefferson@gmail.com</option><option value="7">ora.gibbs@gmail.com</option><option value="8">katherine.frank@gmail.com</option><option value="9">preston.goodwin@gmail.com</option><option value="10">edna.burke@gmail.com</option></select>

                    </div>

                    <div id="personFilterNotContain">

                      <h5> Dont contain </h5>

                      <select data-placeholder="address" 
                              tabindex="4" name="personNotContainSelect" multiple class="selectPerson"><option value="0"> </option><option value="2">rogelio.francis@gmail.com</option><option value="3">meredith.sullivan@gmail.com</option><option value="4">essie.castro@gmail.com</option><option value="5">arnold.clayton@gmail.com</option><option value="6">eugene.jefferson@gmail.com</option><option value="7">ora.gibbs@gmail.com</option><option value="8">katherine.frank@gmail.com</option><option value="9">preston.goodwin@gmail.com</option><option value="10">edna.burke@gmail.com</option></select>

                    </div>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="personCheckBox"> Apply
                        </label>
                    </div>

                </div>

                <!-- ********************* Source Filter ********************* -->

                <div id="sourceFilter" class="form-group">

                <h4> Source </h4>

                    <div id="sourceFilterSource">

                      <label class="checkbox inline">
                        <input type="checkbox" name="sourceMailCheckBox"> Mail
                      </label>

                      <label class="checkbox inline">
                        <input type="checkbox" name="sourcePhoneCheckBox"> Phone
                      </label>

                      <label class="checkbox inline">
                        <input type="checkbox" name="sourceDiscussionCheckBox"> Discussion
                      </label>

                    </div>
</div>
<script>
$(document).ready(function () { 
    $('select[name=personNotContainSelect]', this).chosen();
    $('select[name=personContainSelect]', this).chosen();
});
</script>

css

#filter{
    text-align: center;
}

#filter, #details{
  overflow: auto;
}

#filter h4{
  text-align: left;
}

#personFilter, #sourceFilter{
    width: 535px;
    height: 200px;
    margin: 0 auto;
    display: inline-block;
}

#personFilter{
    height: 100px;
    margin-top: 27px;
    display: inline-block;
}

#personFilter h5{
  max-width: 200px;
  padding-left: 1px;
  text-align: left;
  margin-bottom: 5px;
}

#personFilter select{
    width: 250px;
}

#personFilter div{
  display: inline-block;
}

#personFilterContain{
  max-width: 400px;
  float:left;
}

#personFilterNotContain{
  max-width: 400px;
  float: left;
  margin-left: 30px;
}

#personFilter label:last-child{
  width: 0;
}

#personFilter .chosen-container{
  top:-30px;
}

#personFilter .checkbox{
    width: 300px;
    float: left;
    margin-top: -10px;
}

#sourceFilter {
    text-align: left;
    margin-top: 21px;
    position: relative;
}

#sourceFilterSource{
    margin-top: 15px;
}

Answer 1

为选择设置 ID 属性（例如测试）：

<select id="test" data-placeholder= "address"...
 ...
</select>

添加更改事件。注意#test_chosen，来自<select> 的类似ID att。插件添加的后缀 _chosen。

$('select[name=personContainSelect]', this).chosen().change(function(){           
        var h=$('#test_chosen').height()
        h+=56;//init height of chosen            
        $('#personFilter').height(h)
    });

解决方案 2： CSS

#personFilter{
    height: auto;
}