Question

我正在使用Wookmark插件，这很棒。但是，在Chrome和Safari中观看时，最后一项与其他项目重叠。奇怪的是当我击中CMD + R时它重叠，但是当标记URL并按下ENTER时它不会重叠。在Firefox中观看时，它永远不会重叠，一切都很好。

其次，当使用偏移时，它会将全部像素应用于水平而非垂直。所以我必须在项目中添加填充底部。

代码

$('.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 -->

屏幕截图：Screenshot

Answer 1

我自己找到了答案。

看起来你必须在img属性中给出特定高度和宽度的图像。偏移问题是由于我给出的itemWidth中的值不正确，我道歉。

Wookmark插件偏移和重叠

1 个答案: