使用 CSS 定位 Wordpress 标题

Question

我正在将某人的静态 HTML 设计转换为 Wordpress，但在处理标题时遇到了问题。

情况是标题向下扩展，这意味着当一个标题变成多行时，其他标题也会向上跳跃，即使它们只有一行。

这就是发生的事情

这就是我想要的

这是我用来定位标题的 CSS，因此标题的底部会碰到图像的底部：

.single_title {
    font-family:Novecent_norm, arial, helvetica, sans serif;
    font-size: 18px;
    width: 240px;
    color: white;
    background-color: purple;
    margin-top: -86px;
    position: fixed;
}

所以问题是：是否有一个 CSS 属性可以解决这个问题，所以在标题的顶部而不是在标题的底部添加额外的文本行？

根据要求，HTML：

<?php get_header(); ?>

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="content_container">
    <div class="thumb_art">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
            <div class="thumb_img" style="z-index: 0;">
            <?php
            if (has_post_thumbnail()) {
                the_post_thumbnail();
            }?>
            </div>
            </a></h2>

        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
        <div class="single_title">

                <?php the_title();?>

            </div></a></h2>
    </div>
</div>
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<div class="navigation">  <div class="alignleft"><?php previous_posts_link('&laquo; Next Entries') ?></div>  <div class="alignright"><?php next_posts_link('Previous Entries &raquo;') ?></div></div>
<?php get_footer(); ?>

Answer 1

使 thumb_art 位置相对，然后在 single_title 上将底部设置为 0 以使其始终保持在底部

css

.single_title {
    font-family:Novecent_norm, arial, helvetica, sans serif;
    font-size: 18px;
    width: 240px;
    color: white;
    background-color: purple;
    bottom:0;
    position: fixed;
}

如果还没有设置为相对，也添加这个

.thumb_art{
   position:relative;//actually any positioning would do
}

仍然不完全确定我是否正确理解了您的问题，如果我遗漏了什么，请告诉。

编辑：

如果你使用我的方法，这就是它的样子

http://jsfiddle.net/nhewu/