将 div 向下推的文本答案

【问题标题】：Text pushing Div Down将 div 向下推的文本
【发布时间】：2015-12-14 18:27:37
【问题描述】：

我正在开发一个 Wordpress 主题并在主页上做邮箱。目前，我有一个模糊的背景，然后将文本覆盖在背景上以区分背景和文本。对于短标题，我正在让它工作，对于较长的标题，文本正在推动实际的照片框。

我试图让事情正常进行，但我没有取得任何进展，或者它看起来更奇怪，我们将不胜感激。

HTML：

<div id="hanger">
<div class="h2"><a href="<?php the_permalink() ?>" title="<?php     the_title_attribute(); ?>"><h2><?php the_title(); ?></h2></a>       </div>
<div id="bgdiv"><div id="hang-bg" style="background-image: url('<?php echo $background[0]; ?>'); background-size: cover; height: 200px; -webkit-filter: blur(5px);-moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);   margin: -5px -10px -10px -5px; "></div>
</div></div>
<?php endwhile; else : ?>
<?php endif; ?>

CSS：

#hanger {
    height: 200px;
    margin-top: -20px;
    text-align: center;
}

#hanger h2 {
    font-size: 35px;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
}

#hanger a {
    font-size: 20px;
    color: white;
    text-decoration: none;
}

#topbg {
    height: 40px;
    width: 100%;
    background: #7f7f7f;
    opacity: 0.5;
    position: relative;
    top: -220px;
}

#bgdiv {
    overflow: hidden;
    border: 1px solid lightblue;
    position: relative;
    top: -70px;
    z-index: 0;
}

.h2 {
    background: url("./images/opac-grey.png");
    position: relative;
    z-index: 2;
    width: 698px;
    margin: 0 auto;
}

【问题讨论】：

你能做一个小提琴或codepen演示吗？我猜#topbg 的固定高度是造成这种情况的原因，您可以尝试将其更改为min-height:40px; 而不是height:40px;
@Aziz 这是一个 wordpress 网站，所以 JsFiddle 不会转移标题等。我不再使用 #topbg，所以不是那样。这是一个链接：theuntoldspiral.com

标签： html css wordpress

【解决方案1】：

感谢分享链接，帮了大忙！你的代码对于一个简单的结构来说有点复杂，你只需要一个容器 div，它有 3 个东西：标题、背景 div、内容 div - 可以这样简化：

post box > post background + post title + post content

代码如下：

.hanger > .hanger-bg + (h2>a) + .hanger-content

JSFiddle Example

HTML / WordPress 代码

<!-- post box -->
<div class="hanger">
    <div class="hanger-bg" style="background-image: url('<?php echo $background[0]; ?>');"></div>
    <!-- post title -->
    <h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <!-- post content -->
    <div class="hanger-content">
        <?php the_content(); ?>
    </div>
</div>
<!-- end post -->

<?php endwhile; else : ?>
<?php endif; ?>

CSS 代码

/* post box */

.hanger {
    min-height: 200px;
    margin-bottom: 20px;
    text-align: center;
    color:#FFF;
    border: 1px solid lightblue;
    position:relative;
}

/* post background */

.hanger-bg {
    background-size: cover;
    position:absolute;
    height:100%;
    width:100%;
    z-index:-1;
    /* blur effect */
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

/* post title */

.hanger h2 {
    font-size: 35px;
    margin:0;
    text-transform: uppercase;
    /*background: rgba(238, 238, 238, 0.5);*/
    background: url("./images/opac-grey.png");
    min-height:40px;
}

.hanger h2 a {
    color: white;
    text-decoration: none;
}

/* post content */

.hanger-content {
    padding:20px;
    text-align:left;
}

一些注意事项：

我将a链接标签放在h2标签内，用于better semantics
背景 div 是使用 position:absolute + z-index:-1; css 技巧实现的
请注意，对多个元素使用相同的 id 是一种语法错误 - ids 是唯一的，因此请改用类。阅读更多关于class vs id

【讨论】：