php - 奇怪的 div 嵌套问题

Question

我正在处理的网站出现了一个奇怪的问题。出于某种原因，div 嵌套在其他 div 中。这搞乱了我的格式，让我抓狂。问题页面在这里:http://www.thecadencegrp.com/our-books/page/2

如果向下滚动到页面底部，您会看到页脚乱七八糟。我似乎无法修复它!

代码如下:

 <?php
/*
Template Name: Template Page
*/
?>

<?php get_header(); ?>


<style>

.middler_title{
    width:1000px;
    margin:20px auto 0 auto;
}

#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}

#footer { width: 960px; margin: 0 auto; display: block; clear: both;}

.middler_title_row {
    float:left;
    width:780px;
    margin-top:20px;
    margin-left: 0;
    margin-bottom: 40px;
    margin-top: 40px;
}

.middler_title_row img{
    float:left;
    display:inline;
    margin-bottom:20px;
    margin-right:20px;
    padding:0;
    margin-left: 0;
}

.middler_title_row h1{
    font-size:30px;
}

.middler_title_row h2{
    font-size:16px;
    margin-top:-38px;
}


.middler_title_row h3{
    font-size:20px;
    margin-top:0px;
}

.middler_title_row h4{
    font-size:20px;
    font-weight:normal;
}

.middler_title_row a{
    text-decoration:none;
    color:#005ECF;
}

h3.author-name
{
padding-top: 0px;
padding-bottom: 20px;
}

#book-navigation
{
width: 240px;
margin: 20px auto;
}

#book-nav-right
{
float: right;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
text-align: left;
}

#book-nav-left
{
float: left;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
}


</style>
<?php 

global $more;

$more=0;
?>

<div id="main-wrap"> <!-- ######################################## -->
<div id="titles-wrapper"> <!-- ######################################## -->

<div class="middler_title">

            <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $args = array(
                'cat' => 1,
                'paged' => $paged
            );
            query_posts($args);

            query_posts('post_type=books&order=DESC&posts_per_page=10&paged='.$paged);
                             while (have_posts()) : the_post(); ?>               








    <div class="middler_title_row">

                <?php $bookcover = get_the_post_thumbnail($page->ID, 'bookcover'); ?>

                         <?php echo $bookcover; ?>

                    <h1><?php the_title(); ?></h1>
                 <?php
            $meta_values = get_post_meta($post->ID, 'subtitle', true);
            ?>  
             <h4><?php echo $meta_values; ?></h4>

            <?php
            $meta_values2 = get_post_meta($post->ID, 'author', true);
            ?>   
                    <h3 class="author-name"><?php echo $meta_values2 ; ?></h3>


                            <?php
            $meta_values11 = get_post_meta($post->ID, 'what_cadence_has_done_to_help_this_book', true);
            ?>


                    <?php
            $meta_values3 = get_post_meta($post->ID, 'overview', true);
            ?>

            <?php
            $meta_values4 = get_post_meta($post->ID, 'read-more', true);

            if(!$meta_values4){
            $strtitle = get_the_title();
            $title=explode(' ',$strtitle);
            $title=implode('-',$title);
                if(count($title)<1){
                        $title=strtolower($strtitle);
                    }else{
                        $title=strtolower($title);
                }
            $meta_values4 = get_bloginfo('wpurl').'/Books/'.$title;
            }
            ?>   

            <p><?php echo $meta_values11 ?></p>

            <p><?php echo substr($meta_values3,0,340); ?><a href="<?php echo $meta_values4;?>"> ...READ MORE</a></p>
    </div>

    <?php endwhile; ?>


    <div id="book-navigation">
       <div id="book-nav-right"><?php next_posts_link('NEXT &#62;&#62;', $the_query->max_num_pages) ?></div>
       <div id="book-nav-left"><?php previous_posts_link('&#60;&#60; PREVIOUS') ?></div>
    </div>


   </div>


</div> <!-- ######################################## -->
</div> <!-- ######################################## -->

  <div id="footer">

    <?php get_footer(); ?>     

  </div>  

Answer 1

如果你看你写的页面中html的源码，你会发现有一个 您先请 您打印的每个 middler_title_row 都有一个

甚至没有打开。

只要在firefox中打开页面按Ctrl+U看源码就会看到红线

，这是你的问题之一

另一个问题是

在你尝试在 css 中解决这个问题之前，你需要先让你的 html 有效