javascript - 相对改变div的位置

Question

我的页面中有 16 个 div，每个 div 在右上角都有一个十字按钮，单击十字按钮应该隐藏 div，并且应该重新定位隐藏 div 旁边的 div，例如假设我们有 5 个 div

1 2 3 4 5

假设 3 被交叉，序列应该是这样的

1 2 4 5。

div 中还有一个按钮，类似于按钮，单击该按钮，该 div 应位于位置 1，例如我们有 10 个 div，例如：

1 2 3 4 5 6 7 8 9 0

说 8 喜欢然后布局应该是这样的：

8 1 2 3 4 5 6 7 9 0

Answer 1

你需要浮动你的div。当一个被隐藏时，其余的将自动移动。

至于重新定位，您需要使用 jQuery 移动它们。

试试这个小提琴

HTML

<div id="container">
    <div class="box">1<br/><a class="like" href="#">Like me</a></div>
    <div class="box">2<br/><a class="like" href="#">Like me</a></div>
    <div class="box">3<br/><a class="like" href="#">Like me</a></div>
    <div class="box">4<br/><a class="like" href="#">Like me</a></div>
    <div class="box">5<br/><a class="like" href="#">Like me</a></div>
</div>

CSS

div.box { 
    display: block; 
    width: 90px; 
    height: 50px; 
    float: left; 
    margin: 5px; 
    border: 1px solid #000; 
    text-align: center;
}

Javascript

$('a.like').on('click', function () {
    $('#container').prepend($(this).parent());
    return false;
})

$('div.box').on('click', function() {
   $(this).hide();
})