繁体   English   中英

奇怪的div嵌套问题

[英]Strange div nesting issue

我正在使用的网站存在一个奇怪的问题。 由于某些原因,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>  

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

那甚至都不开放。

只需在firefox中打开页面,然后按Ctrl + U即可查看源代码,并且您会看到一条红色的

,这是您的问题之一

另一个问题是

您需要先整理html才能使其有效,然后再尝试在CSS中解决此问题

您有2个div,其id =页脚。 我想说您的问题不是神秘的div错误或CSS。 我想说您的标记首先需要进行一些审查。 尝试检查选择器是否正常,然后正确关闭每个div。 之后,看一下页脚。 如果您希望将页脚卡在该位置的底部,请查看“粘滞页脚”。 您可以使用一些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>

我认为您的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因此当将margin设置为#titles-wrapper它将使页脚向右移动。 还有另一种方法,但这是最简单的。

图片在这里

您的页脚div通过以下样式位于titles-wrapper div中:

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

您可以在此放置页脚,也可以设置margin-left:0px; 以#titles-wrapper样式。

在此处输入图片说明

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

您还需要检查的另一件事是为什么页脚位于titles-wrapper ,而不应该放在脚注中,因为您可以在图片中看到</div> <!--/wrapper-->是页脚的父级,因此您的页脚将像titles-wrapper一样向前移动,只需将页脚从titles-wrapper中取出,一切都应该是正确的

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM