javascript - 删除 div 或平铺 div 之间的空间

Question

我想在 HTML 页面中显示一些 div，它们会自动平铺，它们之间没有任何间隙。我怎样才能做到这一点，请提出您的建议。我还希望在使用关闭按钮删除一些 div 后自动调整 div。

HTML 代码:

<div class="row">
<div class="main" id="1">
    <p>This is sample test</p>
    <a href="javascript:close('1')">Close</a>
</div>
<div class=" main " id="2">
    <p>This is some sample text which is longer than the other div's and I want other divs to automatically arrange around this wihout space</p>
    <a href="javascript:close(2)">Close</a>

</div>
<div class="main" id="3">
    <h3>I want to move this div UP and remove space below this div</h3> 
    <a href="javascript:close(3)">Close</a>
</div>
<div class=" main " id="4">
    <p>This is sample test</p>
    <a href="javascript:close(4)">Close</a>

</div>
<div class="main" id="5">
    <p>This is sample test</p> <a href="javascript:close(5)">Close</a>

</div>
<div class=" main " id="6">
    <p>This is sample test</p>
    <a href="javascript:close(6)">Close</a>
</div>
</div>

CSS:

.main {
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    width: 40%;
    border: 3px coral solid;
    margin: 10px;
}

JavaScript:

function close(id) {
    $(document).ready(function () {
        $("#" + id).remove();
    });
}

此处演示:http://jsfiddle.net/Bc7tU/1/

Answer 1

你应该将它添加到你的 css 中:

.main:nth-child(2n+1) {
     clear: left;   
}