Question

我正在编写一个wordpress主题，并且遇到奇怪的间距问题。

我希望我的帖子div与特色图片重叠。你可以在这里看到这个：http://www.icc565.com/spring2014/ncdevoe/wordpress/

我遇到的问题是我使用绝对定位将帖子内容定位在帖子的精选图片上，而且似乎是添加了我用来将帖子定位到帖子底部的空间量这个帖子在我的每个帖子下都有一个巨大的空间。

我尝试通过在帖子容器中添加一个负余量来解决问题，但这使得帖子没有特色图片与之前的帖子重叠。所以我放弃了这个想法。

如果有人能就如何解决这个问题给我任何意见，我们将不胜感激。这是我的代码：

CSS

.post-container {
    width: 100%;
    position: relative;
        margin-bottom: 30px;
}

.post-image img{
    max-width: 100%;
    z-index: 1;
}

.post-content {
    position: relative;
    left: 30px;
    bottom: 110px;
    width: 580px;
    z-index: 2;
}

.post-content p{
    font-size: 18px;
  line-height: 22px;
    margin-bottom: 15px;
}

.post-content img {
  max-width: 100%;
}

.post-meta h3 {
    text-transform: uppercase;
    font-size: 12px;
    color: white;
    margin-bottom: 3px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.post {
    background-color: white;
    color: black;
    padding: 15px;
}

这是我的HTML：

  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <?php if ( has_post_thumbnail() ) { ?>
    <div class="post-container">
        <div class="post-image">
        <?php the_post_thumbnail(); ?>
        </div>
    <?php } else { ?>
    <div class="post-container">
  <?php } ?>
    <div class="post-content">
        <div class="post-meta">
                    <h3>Date: <?php the_date(); ?> | Author: <?php the_author(); ?> | Categorized: News, Television, Celebs</h3>
                </div>
        <div class="post">
        <h1><?php the_title(); ?></h1>
                    <?php the_content(); ?>
        </div>
    </div>
    </div>

    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>

您可以在此处查看问题：http://www.icc565.com/spring2014/ncdevoe/wordpress/

提前非常感谢你！

Answer 1

您的.post-content正在使用position: relative; bottom: 110px。这会将其向上滑动一点，但父div（.post-container）保留.post-content的位置，就好像它没有被移动一样。您可以通过将margin-bottom: -110px;添加到.post-content来调整此值，以便父div可以弥补丢失的空间。

总之，请将您的.post-content CSS更改为：

.post-content {
    position: relative;
    left: 30px;
    bottom: 110px;
    margin-bottom: -110px;
    width: 580px;
    z-index: 2;
}

编辑：我为没有阅读您显示缩略图可能丢失的PHP代码而道歉。然后你可以使用这些：

.post-content {
    position: relative;
    left: 30px;
    width: 580px;
    z-index: 2;
}
.post-image + .post-content {
    bottom: 110px;
    margin-bottom: -110px;
}

这使得如果在您的内容之前有一个.post-image元素，它会相应地调整位置，而您不必担心添加/更改类的麻烦。

Answer 2

像这样更新CSS：

.post-container{
   margin-bottom:-110px
}
.post-content{
   top:-110px;
}

Answer 3

我最终不得不在我的WordPress循环中使用if语句，如果帖子有特色图像，它只对内容div应用绝对定位和负底边距。这解决了这个问题。

绝对定位导致奇数间距

3 个答案: