Question

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

HTML CODE：

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

Answer 2

删除/缩小边距并指定固定高度，以便为您的HTML提供效果

尝试

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

}

Answer 3

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

Answer 4

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

删除div或平铺div之间的空格

4 个答案: