html - 绝对定位导致奇怪的间距

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;底部: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 元素，它会相应地调整位置，您不必担心添加/更改会搞砸类。