如果有多个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/

10-09 15:38
查看更多