Question

理想情况下，在border-top和border-bottom之间，我想拥有3个投资组合缩略图，一个分隔符（.png）和3个博客缩略图。每个部分最右边的下方应该是'...'（next.png）。

ideal

目前，直接在“近期工作”之上存在随机边框，不应该存在，并且“最近博客”的“...”按钮位于边框底部之下。造成这种情况的原因是什么？如何解决？

在我为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;
}

Answer 1

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

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

Answer 2

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

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

Answer 3

使用动态PHP然后硬编码的HTML版本发布输出的内容，并将它们并排比较。他们之间的不同之处就是答案。

为PHP导致的HTML导致了小的布局问题，不确定如何修复

3 个答案: