0

我正在处理的网站有一个奇怪的问题。出于某种原因,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>  
4

5 回答 5

0

在此处输入图像描述

如果所有的 div 都设置整齐,那么</div>我标记的会导致所有问题,只需找到它并消除它!:D 通常在</html>你不应该有任何其他标签之后

您必须检查的其他事情是为什么您的页脚在titles-wrapper其中,它不应该是,因为您可以在图片中看到</div> <!--/wrapper-->您的页脚的父级,因此您的页脚将向前移动titles-wrapper,只需将您的页脚移出你的标题包装器,一切都应该没问题

于 2013-11-11T07:56:56.257 回答
0

您的页脚 div 以这种样式位于 title-wrapper div 中:

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

您可以从中取出页脚或设置 margin-left: 0px; #titles-wrapper 样式。

于 2013-11-11T07:51:13.377 回答
0

如果您在您编写的页面中查看 html 的源代码,您会看到在您打印的每个 middler_title_row 之后都有一个

那甚至没有打开。

只需在Firefox中打开页面并按Ctrl + U查看源代码,您将看到一条红线

,这是你的问题之一

另一个问题是

在尝试在 css 中解决此问题之前,您需要先使您的 html 有效

于 2013-11-11T07:37:56.083 回答
0

你有 2 个 id = 页脚的 div。我会说你的问题不是一个神秘的 div 错误或 css。我会说你的标记首先需要一些审查。尝试查看选择器是否正常,然后每个 div 都正确关闭。之后,看看页脚。如果您希望页脚卡在该位置的底部,请查看名为“Sticky footer”的内容。您可以通过一些 css 技巧来完成此操作。

<div id="footer">

    <div class="clear"></div>



<div id="footer">

    <div class="thirdpage">
    <br>
    <a href="https://www.facebook.com/thecadencegroup">
    <img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/fb1-300x82.png" width="90">
    </a>
    <br>
    <a href="https://twitter.com/thecadencegrp">
    <img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/tw1-300x65.png" width="113">
    </a>
    <br><br>
    <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US </script> <span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;"><iframe name="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" id="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" src="http://platform.linkedin.com/js/xdrpc.html?v=0.0.1196-RC1.31125-1408#xdm_e=http%3A%2F%2Fwww.thecadencegrp.com&amp;xdm_c=li_gen_1384155259314_0&amp;xdm_p=1#target=li_gen_1384155259314_0&amp;width=600&amp;height=400&amp;mode=wrapper" frameborder="0" style="width: 106px; height: 20px; display: inline-block;"></iframe></span></span><script type="IN/FollowCompany+init" data-id="3323727" data-counter="right"></script> 
    <br><br>
    <h5>© The Cadence Group. All Rights Reserved.</h5>
        </div>


     <div class="thirdpage">

     </div>


     <div class="thirdpage">
      <p>The Cadence Group<br>
      212 Marengo Avenue<br>
      Suite 2S<br>
      Forest Park, IL  60130<br>
      708.689.0908<br>
      <a href="mailto:services@thecadencegrp.com">services@thecadencegrp.com</a>
     </p></div>

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

</div>
于 2013-11-11T07:38:15.407 回答
0

我认为您的 HTML 有问题,但您可以删除margin-left表单#titles-wrapper并设置margin-left.middler_title

这是CSS

#titles-wrapper {
margin-left: 0;
overflow: hidden;
margin-left: 0;   /* removed  */
}

.middler_title {
width: 1000px;
margin: 20px auto 0 auto;
margin-left: 80px;  /* added  */
}

页脚部分位于其中,#titles-wrapper因此当您设置页边距时,#titles-wrapper页脚将向右移动。还有另一种方法,但这是最简单的。

图片在这里

于 2013-11-11T07:39:09.083 回答