Question

我正在尝试为我的内容框连接三个图像，但由于某种原因，第二个和第三个之间有一些空间。任何帮助将不胜感激。

这是网站：http://hyvhuynh.com/hyperbolical-blog

<?php get_header(); ?>

<div id="content">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div <?php post_class();?> id="post-<?php the_ID();?>">
<div id="mythreedivs">
<div id="top">
</div>

<div id="mid">
<h2 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Post <?php the_ID(); ?> - permanent link"><?php the_title(); ?></a></h2>

<ul class="meta">
<li><?php the_time('F j, Y'); ?></li>

</ul>

<div class="postcontent">
<?php the_content(the_title('', '', false)." - continue reading"); ?>
</div>

<ul class="meta postfoot">
<?php if('open' == $post->comment_status) : ?><li class="comment_link"><?php comments_popup_link('Comment on '.$post->post_title, '1 Comment on '.$post->post_title, '% Comments on '.$post->post_title,'postcomment','Comments are off for '.$post->post_title); ?></li><?php endif;?>


<?php if(get_the_tag_list()) :?>
<li>Tags: <?php the_tags('<ul><li>',',</li> <li>','</li></ul>');?></li>
<?php endif;?>
</ul>

</div>

<?php endwhile; ?>

<ul class="prevnext">
<li><?php next_posts_link('&laquo; Older Posts'); ?></li>
<li><?php previous_posts_link('Newer Posts &raquo;');?></li>

</ul>



<div id="bottom">

</div>
<?php endif; ?>

</div>



</div>
<?php get_footer(); ?>

--------- CSS ---------------

#mid {
    background-image:url('http://hyvhuynh.com/wp-content/themes/zenlite/images/bodymiddle.png');
    width:806px;
}

#bottom {
    background-image:url('http://hyvhuynh.com/wp-content/themes/zenlite/images/bodybottom.png');
    width:806px;
    height:27px;

}

#header {
width:800px;
float:right;
margin:0 0 50px 0;  
}


/* 
Navigation Bar Time!
*/  

#jsddm
{   margin: 20px 0 0 0;
    padding: 0;
    font-weight:bold;
    text-shadow: #000000;

}

    #jsddm li
    {   float: left;
        list-style: none;
        font: bold 12px Tahoma, Arial}

    #jsddm li a
    {   display: block;
        background: #E7E7EF;
        padding: 5px 12px;
        text-decoration: none;
        border: 1px solid #555555;
        width: 70px;
        color:#000000;
        white-space: nowrap}

    #jsddm li a:hover
    {   background: #1A4473}

        #jsddm li ul
        {   margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            }

        #jsddm li ul li
        {   float: none;
            display: inline}

        #jsddm li ul li a
        {   width: auto;
            background: #E7E7EF}

        #jsddm li ul li a:hover
        {   background: #1A4473}

/*
End Navigation Time!
*/


.logo {
    float:right;
}

#content .post {
    float:left;
    width:800px;
}


#content .page,#content .attachment,.postcontent {

    width:800px;
    text-decoration:none;

}

.photo {
    width: 250px;
    height:700px;
    background-color:#000000;
    margin:0 0 0 880px;
}

.slideshow { height: 232px; width: 232px; margin:0 0 0 880px;  }
.slideshow img {  border: 5px solid #000;  }

.post-title {
    margin:0;
    padding:0;
    text-align:center;
}
.post-title a {
    text-decoration:none;
    color:#000000;
}
.post-title a:hover,.post-title a:active,.post-title a:focus {
    text-decoration:underline;
    color:#5F625F;
}
#content .meta li,#content .prevnext li,#content .gallery li {
    list-style-image:none;
    list-style:none;
}
.meta {
    margin:5px 0 0;
    padding:0;
    font-size:.85em;
}
.meta ul,.meta li {
    margin:0;
    padding:0;
}
.meta ul {
    display:inline;
}
.meta li li {
    display:inline;
    padding-right:.3em;
}
.postfoot {
    clear:both;

    padding-bottom:10px;
    line-height:1.2em;
}
.author .posts-by {
    padding-top:10px;
}

.clearfix {  
display: inline-block; }

.clearfix:after { 
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden; 
}


#footer {
    clear:both;
    margin:0 auto;
    padding:0 0 5px;
    text-align:center;
    font-size:.8em;
    border: 0;
    width:800px;
    height:200px;

}
#footer ul {
    clear:both;
    margin:0;
    padding:0;
}
#footer li {
    display:inline;
    margin:0;
    padding:0 5px;
}
#footer li.rss {
    position:relative;
    top:3px;
}


.copyright {

}

.copyright a
{

}

.copyright a:hover
{

}





.postcontent p {
    text-decoration:none;
    border:0;
    border-style:none;
    }

    .postcontent p a:hover {
        color:#fff;

    }

Answer 1

空间来自无序列表的边距。将其添加到样式表

ul.prevnext {margin: 0px;}

它会纠正它。我不确定你用它做了什么，所以你可能现在想要废弃它，因为一旦你添加了任何物品，它就会再次弹出。或者将它移动到与mltsteeves提到的不同的位置。

Answer 2

<ul class="prevnext">导致两个div之间的空格，请尝试将其放在上一个div内。

Answer 3

你有nesting errors in your markup。我会先把它们整理出来，从我在Firebug中可以看到的，它可能已经解决了。

省略了“div”的结束标记，但指定了OMITTAG NO

“ul”的结束标记未完成

Answer 4

以下栏目：
     ＆lt; ul class =“prevnext”＆gt;
     ＆LT;李＆GT;＆LT; /立GT;
     ＆LT;李＆GT;＆LT; /立GT;
     ＆LT; / UL＆GT;

不包含在正确的＆lt; div＆gt;内标签，它位于你的mid和bottom div之间。

div之间不需要的空间

4 个答案: