jquery - 同位体-同位体外の元素

Question

アイソトープによって支配されたブロックがあるページを作成していますが、セパレーターを挿入したいと思います。これが私の例です：

    <div id="container_iso">
    <div class="block col1"></div>
    <div class="block col2"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>

    <div class="separator"></div>

    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>
    <div class="block col1"></div>

    <div class="separator"></div>

    </div>
<style>
.container_iso{max-width:999px;}
.block{}
.col1{width:33%;min-width: 333px;}
.col2{width:auto;min-width: 333px;max-width: 666px;}
.separator{width:100%;}
</style>

「セパレータ」divで動作しないようにIsotopeに指示するにはどうすればよいですか。それは私のjsです：

$('.container_iso').isotope({
      itemSelector : '.block',
      columnWidth : 333,
    });

ありがとうございました ！

Answer 1

セパレーターに何も含まれていない場合は、次のことができます

1）好みの高さの場所に透明なpng画像を配置します。2）このサンプルコードを使用して目標を達成できます

.container_iso{max-width:999px; border: 1px solid #111; }
.block{}
.col1{float: left; width:33%;min-width: 333px;height: 25px; background-color: #eee; border: 1px solid #ddd;}
.col2{float: left; width:auto; min-width: 333px; max-width: 666px; height: 25px; background-color: #ccc; border: 1px solid #ddd;}
.separator{float:left; width:100%; height: 25px; background-color: #fff;}

デフォルトの同位体は、要素間にギャップがないことを意味します..

正確なシナリオをjsfiddleできる場合は、正確な答えが得られる可能性があります。例として、私のjsFiddleを次に示します。

http://fiddle.jshell.net/C7nUM/3/

http://fiddle.jshell.net/C7nUM/3/show/

それがうまくいくことを願っています..