0

マルチカラムリストを作成しました。各リストには、その中にdivがあります。この追加されたdivの高さから、この行と次の行の間に空白が表示されます。この行を展開して空白を埋めたり、次の行を表示したりする方法はありますか。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3
        <div class="exp">abc abc</div></li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

ここで説明されている問題http://jsfiddle.net/DPRtF/18/（3から6の間を参照）

4

2 に答える 2

1

あなたが探しているものを理解しているなら、JavaScriptが必要だと思います。

ここで行ったことは、すべてのボックスをループして最大のものを見つけ、その高さをすべてのボックスに追加する小さなスクリプトをまとめることでした。このようにして、空白が消えます。

コードをクリーンアップする必要がありますが、それがポイントを証明しています。

http://jsfiddle.net/E2K8c/

var highestBox = jQuery('li:first');
jQuery('li').each(function() {
    if (jQuery(this).height() > highestBox.height())
        highestBox = jQuery(this);
});
jQuery('li').height(highestBox.height());
于 2011-11-15T15:57:46.913 に答える
0

jQuery組積造はあなたが望むものかもしれません：http：//masonry.desandro.com/それはfloating-divs-don't-have-balanced-height問題を解決します。

于 2011-11-15T16:21:15.520 に答える