0

私は素晴らしい Wookmark プラグインを使用しています。ただし、Chrome と Safari で見ると、最後の項目が他の項目の 1 つと重なってしまいます。奇妙なのは、CMD + R を押すと重複するのですが、URL をマークして ENTER を押すと重複しません。Firefox で見た場合、オーバーラップすることはなく、すべて問題ありません。

2 つ目は、オフセットを使用すると、水平方向ではなく垂直方向のピクセルの全量が適用されることです。そのため、アイテムに padding-bottom を追加する必要があります。

コード

$('.post').wookmark({
  container: $('.grid'),
  autoResize: true,
  align: 'left',
  itemWidth: 365,
  offset: 15
});

HTML

<div class="post" data-id="">

    <div class="post-content rounded-top">
        <header>
            <img class="post-profile-pic rounded" src="<?php ROOT ?>graphic/profile/mette.jpg">
            <div class="post-author-name">Mette-Line Laurvig Nielsen</div>
            <div class="post-stamp">2<?php $print->output('h'); ?> ago</div>
        </header>
        <article>Let's turn up the music! I am very nervous that this won't work in the end. What do you guys think? Please tell me the truth :) And a lot of nervousity.</article>
        <div class="post-details">
            <span class="post-like"><?php $print->output('like'); ?> &nbsp;·&nbsp;</span>
            <span class="post-likes"><i>3</i> <?php $print->output('likes'); ?></span>
            <span class="post-comments-count"><i>17</i> <?php $print->output('comments'); ?></span>
        </div><!-- .post-details -->
    </div><!-- .post-content -->

    <div class="comment-wrap post-comments rounded-top">
    </div><!-- .post-comments -->

    <div class="comment-wrap post-write-comment rounded-bottom">
        <form method="post">
            <textarea class="rounded-bottom" type="text" name="" placeholder="<?php $print->output('write your comment...'); ?>"></textarea>
        </form>
    </div><!-- .post-write-comment -->

</div><!-- .post -->

スクリーンショット:スクリーンショット

4

1 に答える 1

0

私は自分で答えを見つけました。

img 属性で画像に特定の高さと幅を指定する必要があるようです。オフセットの問題は、私が指定した itemWidth の値が正しくないことが原因でした。申し訳ありません。

于 2013-08-19T07:52:13.683 に答える