html - CSSによるWordpressのタイトル配置

Question

誰かの静的 HTML デザインを Wordpress に変換していますが、タイトルを操作するときに問題が発生します。

その場合、タイトルは下に拡張されます。つまり、1 つのタイトルが複数の行になると、他のタイトルも 1 行だけでもジャンプします。

これが起こることです

こうなりたい

これは、タイトルの下部が画像の下部に当たるようにタイトルを配置するために使用する 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(); ?>