-1

现场直播。

理想情况下，在边框顶部和边框底部之间，我想要 3 个投资组合缩略图、一个分隔符（.png）和 3 个博客缩略图。每个部分最右边的下方应该是“...”（next.png）。

理想的

目前，“Recent Work”顶部有一个不应该存在的随机边框，“Recent Blog”的“...”按钮位于边框底部下方。是什么原因造成的/我该如何补救？

在我为 php 切换 HTML 之前，一切都很好。

<?php if ($portfolio_query->have_posts()) : ?>
        <div id="recent">
            <div id="recent-work">
                    <p><span>Recent Work</span></p>
                    <?php while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post(); ?>
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(130,130) ); ?></a>
                    <?php endwhile; ?>
                        <div class="next"><a href="http://www.frshstudio.com/blog/"><img src="<?php echo get_template_directory_uri(); ?>/img/next.png" alt="next" id="next" /></a></div>
            </div><!-- end recent-work -->
        <?php endif; ?>

            <div class="divider">
                    <img src="<?php echo get_template_directory_uri(); ?>/img/divider.png" alt="Section divider" id="divider" />
            </div><!-- end divider -->

        <?php if ($blog_query->have_posts()) : ?>
        <div id="recent">
            <div id="recent-blog">
                    <p><span>Recent Blog</span></p>
                    <?php while ( $blog_query->have_posts() ) : $blog_query->the_post(); ?>
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(130,130) ); ?></a>
                    <?php endwhile; ?>
                        <div class="next"><a href="http://www.frshstudio.com/work/"><img src="<?php echo get_template_directory_uri(); ?>/img/next.png" alt="next" id="next" /></a></div>
            </div><!-- end recent-blog -->
        <?php endif; ?>

&

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent .divider {
    display: block;
    float: left;
    margin-left: 20px;
    padding-bottom: 20px;
}

#recent #recent-work {
    display: block;
    float: left;
    position:relative;
}

#recent #recent-work p {
    padding-bottom: 20px;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#recent #recent-work a {
    padding-bottom: 40px;
    padding-right: 20px;
}

#recent #recent-blog {
    display: block;
    float: right;
    position:relative;
}

#recent #recent-blog p {
    padding-bottom: 20px;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-left: 20px;
    text-transform: uppercase;
}

#recent #recent-blog a {
    padding-bottom: 40px;
    padding-left: 20px;
}

#recent .next {
    position: absolute;
    bottom: -40px;
    right: 0px;
}
4

3 回答 3

1

尝试添加关闭</div>以关闭您的第一个<div id="recent">

我认为您无意中嵌套<div id="recent">....<div id="recent">而没有关闭它们中的任何一个

于 2012-06-21T21:07:31.117 回答
1

您不止一次地使用了 id 并且它弄乱了您的页面。这将产生错误，搜索引擎将使用这些错误对您进行低排名。检查http://validator.w3.org/自己看看。

此外，您的 id 最近带有顶部边框，并且您多次使用 div。尝试将最近更改为一个类，然后将包含两者的“最近”div 更改为顶部没有边框的类。

于 2012-06-21T21:09:37.517 回答
0

只需发布动态 PHP 的输出，然后是硬编码的 HTML 版本，然后将它们并排比较。他们之间有什么不同就是答案。

于 2012-06-21T21:06:04.507 回答