将div拆分为两部分，并将内容加载到第二部分

Question

我有一个div元素拆分，并且里面没有css卡片。我想将该卡加载到第二个窗口中（当我在分割div上单击该卡时，窗口应该将其自身分成两个并将该卡加载到第二个div中。但是，远不能仅在点击时分割div。

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>

我希望当我点击.tu类#split应分为两个，并显示负载涂到下半年

Answer 1

在这里，你去了一个解决方案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>

变化的宽度.tu集装箱从350到50%。

希望这会帮助你。

Answer 2

端了固定的几件事情我只想看看我编辑之间所做的更改。

我觉得这是你找什么：

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>