Javascript 将溢出的元素移动到另一个div

我有一个固定高度的div，下面还有一个固定高度的div。我希望不能放入第一个div的元素（完整元素）移动到另一个div。我不希望元素被剪切-只是整体移动，我希望保持顺序-因此span2永远不会早于（高于）span1

<div id="div1" style="height: 200px; width: 300px">
<span id="span1">Hello world<span>
<span id="span2">El 1</span>
</div>

<div id="div2" style="height:200px; width: 300px"></div>

你好，世界
El 1

仅使用CSS就可以做到这一点吗？它实际上不需要从第1集移动到第2集。我只需要2个容器的固定高度和移动元素之间的他们。这可以通过CSS列实现吗？还是flex

---

如果您想使用css列，可以使用如下内容，但只能使用一个div，而不是两个：

。你的课程{
-webkit列数：3；/*Chrome、Safari、Opera*/
-moz列计数：3；/*Firefox*/
列数：3；
}

请尝试

下面的代码检查DIV溢出状态

Javascript:

function IsDivOverFlow(div)
{
    if (div.outerHeight() < div.prop('scrollHeight') || div.outerWidth() < div.prop('scrollWidth')) {
        return true;
    } else {
        return false;
    }
}

函数IsDivOverFlow（div）
{
if（div.outerHeight（）

使用按钮上的功能单击

var Count = 0;
$('button').click(function()
{
    var EditableContent = '<span contenteditable=true>'+(++Count)+' : TEST</span>';
    var oldHTML = $('#div1').html();
    $('#div1').append(EditableContent);
    if(IsDivOverFlow($('#div1'))){
        $('#div1').html(oldHTML);
        $('#div2').append(EditableContent);
    }
});

var计数=0；
$（“按钮”）。单击（函数（）
{
var EditableContent=''+（++Count）+'：TEST'；
var oldHTML=$（'#div1'）.html（）；
$（'#div1'）。追加（可编辑内容）；
if（IsDivOverFlow（$（'#div1'））{
$（'#div1'）.html（oldHTML）；
$（'#div2'）。追加（可编辑内容）；
}
});

---

希望它能有所帮助……

如果你是说要生一个二等生的孩子，这不能用CSS来完成：CSS不会改变DOM@DenysS我知道这是不可能的。但也许我想要实现的是CSS列（或类似的东西）？因此，它看起来有两个不同的DIV，但实际上只有1个。您可以通过jquery来实现这一点，方法是删除现有DIV，然后在需要的地方重新创建它。@Mayank使用jquery，我需要首先计算div1中每个子级的位置和高度，然后将所有溢出的子级移动到div2。由于我允许用户动态更改div1中元素的文本，所以在用户编辑任何内容后，我需要将所有元素从div2返回到div2，然后重新计算位置并再次移动到div2。这似乎是一个缓慢的选择。恐怕你必须在js中计算大小，然后移动dom元素，但我可以将第二列放在第一列的下方，而不是第一列的旁边？这称为行而不是列