15

パーセンテージ幅のdivでjquery masonryを動作させる方法はありますか? 幅が 25%、50%、75%、100% の可変レイアウトを作成しようとしています。しかし、 % で幅を設定するとすぐに、自動サイズ変更が機能しなくなり、 mason onresize を手動でトリガーしようとすると、丸めエラーが発生し、div がジャンプします。また、高さを無視することもあれば、div の配置を停止してすべてを 0,0 に配置することもあるという非常にバグがあります。

HTML マークアップ:

    <div class="boxes">
    <div class="box weight-1">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-1">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-2">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-3">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
</div>

CSS プロパティ:

.weight-1 {
width:25%;
}

.weight-2 {
width:50%;
}

.weight-3 {
width:75%;
}

.weight-4 {
width:100%;
}

任意の入力に対するムチョス グラシアス、J

4

4 に答える 4

12

.wightのものはcssにこれだけを追加することを忘れてください

    .box {
      width: 25%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

組積造js

$(function(){
    var container = $('#boxes');

    container.imagesLoaded(function(){  
        container.masonry({
           itemSelector: '.box',
           columnWidth: function( containerWidth ) {
              return containerWidth /4;// depends how many boxes per row
            }(), // () to execute the anonymous function right away and use its result
            isAnimated: true
        });
    });
});

ホルダーdivをに変更

 <div id="boxes" class="masonry clearfix">

とボックスに

<div class="box">...</div>

（Firefoxは25％のように100の正確な仕切りでビットの問題を引き起こす可能性があることに注意してください。ボックスを24.9または24％に設定してください）古い。

垂れ下がる列の問題を回避するには、ボックスサイズを使用します。

于 2012-06-12T02:55:37.043 に答える
0

25%幅が必要な場合は、ボックス24.9%に追加しないでくださいmargin-left:-1px!important;

于 2013-07-11T04:10:29.687 に答える