Teilen Sie die div in zwei Teile und laden Sie den Inhalt in die zweite Hälfte

Question

Ich habe ein Div-Element aufgeteilt und es hat wenige CSS-Karten drin. Ich möchte diese Karte in ein zweites Fenster laden (wenn ich diese Karte auf Split div klicke, sollte sich das Fenster in zwei teilen und diese Karte in das zweite div laden. Aber ich bin nicht in der Lage das div nur auf Klick zu schneiden.

var $m = $("#split"), size = 2; 
 

 
$m.click(function(){ 
 
    
 
    var _size = $m.width/size; 
 
    var i= "sec"; 
 
    
 
    
 
     $m.append(
 
      $('<div id='+ i +'/>') 
 
      .css('background-color', 'white')); 
 
     
 

 
    $m.find('> div').css({ width:_size, height:_size }); 
 

 
});

#split{ 
 
height:700px; 
 
width:500px; 
 
} 
 

 
.tu{ 
 
     height: 162px; 
 
    width: 350; 
 
    float: left; 
 
    
 
    position: relative; 
 
    
 
} 
 

 
.gradient { 
 
    
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 

 
    background-image: linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
 
    background-image: -o-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
 
    background-image: -ms-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
 
    background-image: -moz-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row" id="split" style="width:100%;"> 
 
     <div class="tu"> 
 
      <div class="card"> 
 
       <div class="gradient"> 
 
      <div class="card-image"> 
 
       <img src="https://ichef.bbci.co.uk/news/624/cpsprodpb/18292/production/_93626989_1902979_10152134574292143_2095474865755623618_n.jpg"> 
 
       <span class="card-title">Card Title</span> 
 
      </div> 
 
      <div class="card-content"> 
 
       <p>I am a very simple card. I am good at containing small bits of information. 
 
       I am convenient because I require little markup to use effectively.</p> 
 
      </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     </div>

Was ich will, ist, wenn ich .tu Klasse klicken Sie auf die #split in zwei und zeigen Last tu in die zweite Hälfte teilen sollte

Answer 1

Hier gehen Sie mit einer Lösung https://jsfiddle.net/5kj0xoh4/

var $m = $("#split"), size = 2; 
 

 
$m.click(function(){ 
 
    
 
    var _size = $m.width/size; 
 
    var i= "sec"; 
 
\t $m.append(
 
    $('<div id='+ i +'></div>') 
 
    \t .html($m.html()) 
 
     .css('background-color', 'white')); 
 
    \t 
 
    $m.find('> div').css({ width:_size, height:_size } 
 
); 
 

 
});

#split{ 
 
height:700px; 
 
width:500px; 
 
} 
 

 
.tu{ 
 
    height: 162px; 
 
    width: 50%; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.gradient { 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-image: linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
 
    background-image: -o-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
 
    background-image: -ms-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
 
    background-image: -moz-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="row" id="split" style="width:100%;"> 
 
    <div class="tu"> 
 
    <div class="card"> 
 
     <div class="gradient"> 
 
     <div class="card-image"> 
 
     <img src="https://ichef.bbci.co.uk/news/624/cpsprodpb/18292/production/_93626989_1902979_10152134574292143_2095474865755623618_n.jpg"> 
 
     <span class="card-title">Card Title</span> 
 
     </div> 
 
     <div class="card-content"> 
 
     <p>I am a very simple card. I am good at containing small bits of information. 
 
     I am convenient because I require little markup to use effectively.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

ändern die Breite .tu Behälter von 350 bis 50%.

Hoffe, das wird Ihnen helfen.

Answer 2

Ended up ein paar Dinge zur Festsetzung würde ich nur Sehen Sie sich die Änderungen an, die ich zwischen den Edits vorgenommen habe:

Ich denke, das ist, was Sie suchen:

var $m = $("#split"); 
 

 
$m.on("click", function(){ 
 
    var tu = $m.find(".tu").first(); 
 
    var i = tu.length + 1; 
 
    var _size = tu.width()/i; 
 

 
    $m.append(
 
     $('<div id='+ i +' class="tu"></div>') 
 
      .html($m.find(".tu").first().html()) 
 
      .css('background-color', 'white')); 
 
     
 

 
    $m.find('.tu').css({ width:_size, height:_size }); 
 

 
});

#split{ 
 
height:700px; 
 
width:500px; 
 
} 
 

 
.tu{ 
 
    height: 162px; 
 
    width: 350px; 
 
    float: left; 
 
    
 
    position: relative; 
 
    
 
} 
 

 
.gradient { 
 
    
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 

 
    background-image: linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
 
    background-image: -o-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
 
    background-image: -ms-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
 
    background-image: -moz-linear-gradient(-180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.35) 100%); 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row" id="split" style="width:100%;"> 
 
     <div class="tu"> 
 
      <div class="card"> 
 
       <div class="gradient"> 
 
      <div class="card-image"> 
 
       <img src="https://ichef.bbci.co.uk/news/624/cpsprodpb/18292/production/_93626989_1902979_10152134574292143_2095474865755623618_n.jpg"> 
 
       <span class="card-title">Card Title</span> 
 
      </div> 
 
      <div class="card-content"> 
 
       <p>I am a very simple card. I am good at containing small bits of information. 
 
       I am convenient because I require little markup to use effectively.</p> 
 
      </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     </div>