理想的には、border-top と border-bottom の間に、3 つのポートフォリオのサムネイル、仕切り (.png)、および 3 つのブログのサムネイルが必要です。各セクションの右端の下には「...」(next.png) があります。
現在、「最近の作業」のすぐ上にあるはずのないランダムな境界線があり、「最近のブログ」の「...」ボタンは境界線の下にあります。何が原因ですか / どうすれば解決できますか?
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;
}