奇怪的div嵌套问题

时间：2013-11-11 07:31:25

标签： php html css wordpress

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

5 个答案:

答案 0 :(得分：0)

如果你在你写的页面中看到html的来源，你会看到有一个 在你之后 你打印的每个middler_title_row都有一个甚至没有打开的

。

只需在firefox中打开页面，然后按Ctrl + U查看源代码，你会看到一行红线

，这是你的一个问题

另一个问题是

之后的问题

在尝试在css

中解决此问题之前，您需要先将html直接设为有效

答案 1 :(得分：0)

你有2个id = footer的div。我说你的问题不是一个神秘的div bug或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>

答案 2 :(得分：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时，它会向右移动页脚。还有另外一种方法，但这是最简单的方法。

image is here

答案 3 :(得分：0)

您的页脚div位于titles-wrapper div中，具有以下样式：

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

你可以从这里放出页脚或设置margin-left：0px;在＃titles-wrapper风格中。

答案 4 :(得分：0)

enter image description here

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

你需要检查的其他内容是你的页脚在titles-wrapper的原因，它不应该是，因为你可以在图片中看到</div> <!--/wrapper-->是你的页脚的父级，所以因此你的页脚将像titles-wrapper一样向前移动，只需将你的页脚从你的标题包装中取出，一切都应该是好的

相关问题
最新问题