html - 文本将 Div 向下推

Question

我正在开发一个 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;
}

Answer 1

感谢分享链接，帮助很大!您的代码对于一个简单的结构来说有点复杂，您只需要一个包含 3 个内容的容器 div:标题、背景 div、内容 div - 它可以这样简化:

post box > post background + post title + post content

which in code is the following:

.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 链接标签放在 better semantics 的 h2 标签内
• 背景 div 是使用 position:absolute + z-index:-1; css trick 实现的
• 请注意，对多个元素使用相同的 id 是一种语法错误 - id 是唯一的，因此请改用类。在 class vs id 上阅读更多内容