我正在使用 Wookmark 插件,非常棒。但是,在 Chrome 和 Safari 中观看时,最后一项与其他一项重叠。奇怪的是,当我点击 CMD+R 时它会重叠,但是当标记 URL 并点击 ENTER 时它不会重叠。在 Firefox 中观看时,它永远不会重叠,一切都很好。
其次,当使用偏移量时,它会应用水平而不是垂直的全部像素。所以我必须在项目中添加一个 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'); ?> · </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 -->
截图:截图