將溢出的元素移動到另一個div

我有一個固定高度的div，另一個div在固定高度下。我想要的元素（整個元素）不能在第一個div內移動到另一個div。我不希望元素被剪切 - 只是整體移動，我希望保持順序 - 所以span2永遠不會比span1更高（更高）。將溢出的元素移動到另一個div

<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。我只需要兩個固定高度和移動元件的容器。這可以用CSS列完成嗎？還是flex？

JS FIDDLE:

來源

2015-09-01 Tom

如果你指的是具有＃＃跨距2的子div2，這不能用CSS來完成：CSS不會改變DOM –

@DenysSéguret我知道它不能。但也許我想要實現的CSS列（或類似的東西）可以完成？所以它看起來活2個不同的divs，但它真的只是1. – Tom

你可以通過jquery實現這一點，通過刪除現有的DIV，並在需要它的地方重新創建它。 – Mayank

如果你想使用CSS列，你可以使用這樣的事情，但只能使用一個DIV，而不是兩個：

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

來源

2015-09-01 14:10:20 Ionut

但我可以把第二列下面的第一個而不是第一個旁邊？ – Tom

稱爲行而不是列 – Ionut

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

希望它可以幫助....

來源

2015-09-03 06:14:22 Mayank

將溢出的元素移動到另一個div

回答

相關問題