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/

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

将.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>

将div拆分为两部分并将内容加载到后半部分

2 个答案: