1

我想在 HTML 页面中显示一些 div，这些 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/

4

4 回答 4

0

Remove/reduce the margin and assign fixed height to give tiles effect to your HTML

Try with

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

}

于 2013-10-04T20:21:15.760 回答
0 
.main {
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    width: 40%;
    border: 3px coral solid;
    clear:left
}
于 2013-10-04T20:38:09.707 回答
0

你应该把它添加到你的 CSS 中：

.main:nth-child(2n+1) {
     clear: left;   
}
于 2013-10-04T20:16:30.747 回答
0 
.main {
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    width: 40%;
    clear:both;
    border: 3px coral solid;
    margin: 0px;
}
于 2013-10-04T20:48:39.730 回答