绝对定位导致奇数间距答案

【问题标题】：Absolute Positioning causing odd spacing绝对定位导致奇数间距
【发布时间】：2014-04-30 04:18:35
【问题描述】：

我现在正在编写一个 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/

非常感谢您！

【问题讨论】：

标签： html css wordpress

【解决方案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 元素，它会相应地调整位置，您不必担心添加/更改类。

【讨论】：

这解决了大多数帖子的问题，但如果帖子没有缩略图，则帖子与之前的帖子重叠。不过谢谢！
@Noelle 根据这些相关信息更新了我的答案。
抱歉回复晚了！我接受了你的回答！非常感谢！

【解决方案2】：

像这样更新 CSS：

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

【讨论】：

这解决了大多数帖子的问题，但如果帖子没有缩略图，则帖子与之前的帖子重叠。不过谢谢！

【解决方案3】：

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

【讨论】：