1

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

ジャバスクリプト:

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

デモはこちら: http://jsfiddle.net/Bc7tU/1/

4

4 に答える 4

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 に答える
0

余白を削除/縮小し、固定の高さを割り当てて、HTML にタイル効果を与えます

試してみてください

 .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 に答える