Question

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

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

这就是发生的事情 This is what happens

这就是我想要的 enter image description here

这是我用来定位标题的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属性，所以在标题的TOP上添加额外的文本行而不是它的BOTTOM？

根据要求，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上将bottom设置为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/

使用CSS进行Wordpress标题定位

1 个答案: