jquery - 如何在另一个网格旁边 float 一个网格

Question

我试图在用户点击的网格旁边放置一个网格。
一切正常，但下一个网格不会自动 float 到空白空间如何实现。
这是我的 HTML:

<ul class="gridWrapper">
  <li class="grid">

  </li>
  <li class="grid">

  </li>
  <li class="grid">

  </li>

  <li class="grid">

  </li>
</ul>

我的 CSS:

.gridWrapper {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.grid {
  display: inline-block;
  min-width: 300px;
  width: 45%;
  height: 50px;
  background: green;
  box-sizing: border-box;
  border: 5px solid #fff;
}
.grid-full{
  width: 100%;
  background: red;
}

脚本在这里:

$('.grid').click(function() {
$('.grid-full').remove();
  $(this).after('<li class="grid grid-full"></li>');
});

My JSFiddle Link:

Answer 1

从 CSS 中移除 width: 100%:

.grid-full{
  background: red;
}

fiddle :https://jsfiddle.net/haom8brd/

根据评论，是的，你可以。找到下一个偶数网格并将其放在下一个:

$('.grid').click(function() {
  $('.grid-full').remove();
  $(this).next(".grid:nth-child(even)").after('<li class="grid grid-full"></li>');
});

fiddle :https://jsfiddle.net/3sLhfL9e/