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移动它们。

Try this fiddle

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();
})

相对改变div的位置

1 个答案: