Question

我正在尝试使用CSS multiolumn为我正在构建的WordPress网站的博客索引页面创建一个砌体布局，我遇到了一些问题。我正在使用Bones作为首发主题。

我调整了home.php文件中的循环来创建砌体效果：

<?php get_header(); ?>
<div id="content">
    <div id="inner-content" class="wrap cf">
        <main id="main" class="m-all t-2of3 d-5of7 cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog">
            <div class="masonry-container">
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                    <div class="masonry-item">
                        <article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
                            <a href="<?php the_permalink(); ?>">
                                <section class="entry-content cf">
                                    <h1 class="h2 entry-title"><?php the_title(); ?></h1>
                                    <?php if ( has_post_thumbnail() ) : ?>
                                        <div class="masonry-thumbnail">
                                            <?php the_post_thumbnail('masonry-thumb'); ?>
                                            <span class="caption"><span><?php the_title(); ?></span></span></a>
                                        <?php endif; ?>
                                    </div><!--.masonry-thumbnail-->
                                </div> <!--.masonry-item-->
                                <div class="masonry-post-excerpt">
                                    <?php the_excerpt(); ?>
                                </div><!--.masonry-post-excerpt-->
                                <div class="blog-index-content"><?php the_content(); ?></div></a>
                            </section>
                        </article>
                    <?php endwhile; ?>
                    <?php bones_page_navi(); ?>
                <?php else : ?>
                    <article id="post-not-found" class="hentry cf">
                        <header class="article-header">
                            <h1><?php _e( 'Oops, Post Not Found!', 'bonestheme' ); ?></h1>
                        </header>
                        <section class="entry-content">
                            <p><?php _e( 'Uh Oh. Something is missing. Try double checking things.', 'bonestheme' ); ?></p>
                        </section>
                        <footer class="article-footer">
                            <p><?php _e( 'This is the error message in the index.php template.', 'bonestheme' ); ?></p>
                        </footer>
                    </article>
                <?php endif; ?>
            </div> <!--.masonry-container-->
        </main>
        <?php get_sidebar(); ?>
    </div>
</div>
<?php get_footer(); ?>

我正在尝试使用帖子缩略图（特色图片）来填充整个.masonry-item div，现在，.masonry-item div大于帖子缩略图。

图片下方还有一个空的<a>标签，我无法弄清楚它来自哪里。

我也试图让帖子标题一旦显示在缩略图上，我还没想出如何让它工作。

以下是我的测试网站的链接：http://tippingpointphoto.flywheelsites.com/blog/

任何帮助将不胜感激！

Answer 1

在.masonry-thumbnail div中有一个<a>链接，这是空标记。给它一个类名并为它们分配这些样式属性：

.link { // for example if you called it link
 display:block; // this will wrap it around the image
 position:relative; // to position the caption
}

现在更新您的.caption课程并添加：

position:absolute;
top:auto;
bottom:0; // to text will start from the bottom of the image 
z-index:1; // to position the text above the image

当我查看您的网站时，图片宽度似乎与div宽度匹配，所以我假设您设法解决了这个问题？如果不更改它的css，则宽度设置为100％。

WordPress博客索引CSS砌体布局

1 个答案: