/ / jqueryで要素を並べ替える-javascript、jquery、css

jqueryで要素を並べ替える - javascript、jquery、css

子divが3列に並んだdivがあります。子divのcss:

{position:relative,float:left}

私は次のようなjQueryスニペットを使用します:

$("#catalog-body").find("[data-"+ type +"="" + val + ""]").hide();

それはうまく機能しますが、(隠されたdivの代わりに)行にギャップが生じる可能性があります。 divを再調整する方法は? 前もって感謝します。

回答:

回答№1は0

このように要素構造を変更します。

<html>
<head>
<style>

#catalog-body{
width : 300px;
}

.child-ele
{
float:left;
width:90px;
height:30px;
border:1px red solid;
}
</style>
</head>
<body>

<div id="catalog-body" >
<div class="child-ele" >1</div>
<div class="child-ele" >2</div>
<div class="child-ele" >3</div>
<div class="child-ele" >4</div>
<div class="child-ele" style="display:none" >5</div>
<div class="child-ele" >6</div>
<div class="child-ele" >7</div>
<div class="child-ele" >8</div>
<div class="child-ele" >9</div>
<div class="child-ele" >10</div>
</div>
</body>
</html>

これはあなたが得るべき結果です、 ここに画像の説明を入力

5番目の要素は非表示ですが、すべての子が適切に配置されています