如何将<div class =“ tile”>与另一个<div class =“ tile”>合并？

Question

我有图块，我想知道是否可以合并图块？

在我的图像上，我有3个图块，我想将它们合并。

Before:
<div class="tile"> </div>
<div class="tile" style="background:#012496">
  <a href="JavaScript:window.close()" style="color:white; font-size:70px;">BACK</a>
</div>
<div class="tile"> </div>

After

<div class="tile no-border-right" style="background:#012496">
</div>
<div class="tile no-border" style="background:#012496">
  <a href="JavaScript:window.close()" style="color:white; font-size:70px;">BACK</a>
</div>
<div class="tile no-border-left" style="background:#012496">
</div>

Answer 1

这对我有用。是你的意思吗？

$(function() {
  var html = $(".tile").map(function() {
    return $(this).html();
  }).get()
  $(".tile").eq(0).html(html).css({
    "width": "300px",
    "background": "#012496"
  });
  $(".tile:gt(0)").remove();
});

div.tile {
  float: left;
  width: 100px;
  height: 50px;
  border: 3px solid yellow;
  text-align:center;
}

div.tile1 {
  float: left;
  width: 100px;
  height: 50px;
  border: 3px solid yellow;
  text-align:center;
}
hr, br { clear:both }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Before<br/>

<div class="tile1"></div>
<div class="tile1" style="background:#012496">
  <a href="JavaScript:window.close()" style="color:white; font-size:20px;">BACK</a>
</div>
<div class="tile1"></div>
<br/>
<hr/>
After<br/>

<div class="tile"></div>
<div class="tile" style="background:#012496">
  <a href="JavaScript:window.close()" style="color:white; font-size:20px;">BACK</a>
</div>
<div class="tile"></div>