如果有多个select2,则所有选择框都将 float 在屏幕上。如果在一个值中选择了足够大的值,这将导致该框的大小调整,则其下方 float 的所有select2框都将移动到该框的右侧。
这是问题的jsfiddle。
如果框a-f都在同一行上,请调整其大小,直到框d,e和f在下一行上。一旦发生这种情况,请在方框b中选择任一选项,并观察方框d,e和f会发生什么。有没有办法让d保持原样?
如果您调整窗口的大小,使得每行只有两个框,然后在框b中选择一个选项,则它会以更理想的方式使用react。但是,如果您在方框a中选择一个选项,它将再次陷入困惑。
如果您调整窗口的大小,以便仅在第二行上显示框f,则在a或e中选择一个选项会导致框f的正常移动,但是在框b,c和d中选择选项会使框f愚蠢地移动再来一次。
我曾考虑过将div的框变大,但这确实可行,因为我使用的是具有大量选项的多重选择框(我之所以使用select2的原因是纯粹的选项数量) ),这意味着用户仍然可以选择2个或3个值并遇到相同的问题。
我尝试过的另一种尝试是使所有div调整为最大div的大小。问题在于,目前似乎没有标准的实现方式可以让我“听”调整大小并使用react。以很小的时间间隔轮询大小并在发生更改时使用react似乎是一个非常麻烦的解决方案。
那么,有没有办法使选择框填满后使较低级别的框向下移动?
这是jsfiddle中的代码:
HTML:
<div class="float">
<select id="a" multiple="multiple" class="short">
<option>This is going to be a really long value.</option>
<option>This is going to be another really long value.</option>
</select>
</div>
<div class="float">
<select id="b" multiple="multiple" class="short">
<option>This is going to be a really long value.</option>
<option>This is going to be another really long value.</option>
</select>
</div>
<div class="float">
<select id="c" multiple="multiple" class="short">
<option>This is going to be a really long value.</option>
<option>This is going to be another really long value.</option>
</select>
</div>
<div class="float">
<select id="d" multiple="multiple" class="short">
<option>This is going to be a really long value.</option>
<option>This is going to be another really long value.</option>
</select>
</div>
<div class="float">
<select id="e" multiple="multiple" class="short">
<option>This is going to be a really long value.</option>
<option>This is going to be another really long value.</option>
</select>
</div>
<div class="float">
<select id="f" multiple="multiple" class="short">
<option>This is going to be a really long value.</option>
<option>This is going to be another really long value.</option>
</select>
</div>
Javascript
$(document).ready(function() {
$('#a').select2({
width: 100,
placeholder: 'a'
});
$('#b').select2({
width: 100,
placeholder: 'b'
});
$('#c').select2({
width: 100,
placeholder: 'c'
});
$('#d').select2({
width: 100,
placeholder: 'd'
});
$('#e').select2({
width: 100,
placeholder: 'e'
});
$('#f').select2({
width: 100,
placeholder: 'f'
});
});
CSS
.float{
float: left;
}
.short{
width: 100px;
}
最佳答案
是的,正如mfreitas
所述,inline-block
将使它们按照您想要的方式排列。
应用inline-block
时,块的内部被格式化为块级框。元素本身被格式化为内联级别的框。
http://www.w3schools.com/cssref/pr_class_display.asp
关于javascript - Select2和 float div问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22260869/