Question

我有一个固定高度的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>

这只能用CSS吗？它实际上不必从div1移动到div2。我只需要2个固定高度的容器和它们之间的移动元件。这可以用CSS列完成吗？还是弯曲？

JS FIDDLE:

Answer 1

尝试FIDDLE。

以下代码检查DIV溢出状态。

<强>使用Javascript：

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

使用按钮上的功能单击

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);
    }
});

希望它有所帮助......

Answer 2

如果你想使用css列，你可以使用这样的东西，但只使用一个div而不是两个：

＆＃13;

.your_class{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

＆＃13;

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

2 个答案: