php - div 元素进入前一个 div 元素

标签 php html css

在我的网站主页中，我有 3 个彼此相邻的小部件(左、中和右)。
问题是右侧小部件(名为发布)位于中央小部件下方。当我通过 Chrome 中的检查工具检查代码时，我注意到正确的小部件是中心小部件的子元素。所以我检查了我的 Home.php 文件，但所有 3 个小部件都在单独的 div 元素中。
知道是什么导致了问题吗？
这是网站的链接:http://appro-europe.net

这是我的 home.php 文件中的代码:

<?php get_header(); ?> 

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <?php dynamic_sidebar('Sideshow/Shark'); ?>
</div>
<main>
    <section class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3  col-sm-4 col-sm-12 lr st-menu st-effect-1" id="menu-1">
                <?php dynamic_sidebar('Sidebar_left_home/Shark'); ?>
            </div>

            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 md">
                <?php dynamic_sidebar('Home_middle/Shark'); ?>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 rl st-menu st-effect-2" id="menu-2">
                <?php dynamic_sidebar('sidebar_right_home/Shark'); ?>
            </div>
        </div>
    </section>
</main>

<?php get_footer(); ?>

中心小部件的代码: 

function home_3cols_init()
{
register_widget('home_3cols');
}

class home_3cols extends WP_Widget{

function home_3cols()
{
    $widget_ops = array('classname' => 'home_3cols', 'description' => 'Home 
 3 cols recent posts widget.');

    $control_ops = array('id_base' => 'home_3cols-widget');

    $this->WP_Widget('home_3cols-widget', 'Shark: home_3cols ', $widget_ops, 
$control_ops);
}

function widget($args, $instance)
{
    extract($args);

    $show_excerpt = isset($instance['show_excerpt']) ? 'true' : 'false';

    $title = $instance['title'];
    $post_type = 'all';
    $categories = $instance['categories'];
    $posts = $instance['posts'];
    $images = true;

    $title_2 = $instance['title_2'];
    $post_type_2 = 'all';
    $categories_2 = $instance['categories_2'];
    $posts_2 = $instance['posts_2'];
    $images_2 = true;

    $title_3 = $instance['title_3'];
    $post_type_3 = 'all';
    $categories_3 = $instance['categories_3'];
    $posts_3 = $instance['posts_3'];
    $images_3 = true;



    echo $before_widget;
    ?>

    <?php
    $post_types = get_post_types();
    unset($post_types['page'], $post_types['attachment'], 
 $post_types['revision'], $post_types['nav_menu_item']);

    if($post_type == 'all') {
        $post_type_array = $post_types;
    } else {
        $post_type_array = $post_type;
    }
    ?>      
            <?php
            $recent_posts = new WP_Query(array(
                'showposts' => $posts,
                'post_type' => $post_type_array,
                'cat' => $categories,
            ));
            ?>
        <div class="line"><h1><a href="<?php echo get_category_link( 
 $categories ) ?>"><?php echo $title; ?></a></h1></div>
                <div id="owl-demo" class="owl-carousel">
                    <?php $counter = 1; while($recent_posts->have_posts()): 
 $recent_posts->the_post(); ?>
                    <div class="item">
                            <img src="<?=the_image(($post->ID),4);?>" alt="
 <?php the_title(); ?>" title="<?php the_title(); ?>">
                            <a href="<? the_permalink();?>" class="lt">
                                <h1><?php the_title(); ?></h1>
                            </a>
                            <div class="lb">
                                <?php
                                if ( has_excerpt() ) {
                                  the_excerpt();
                                    } else {
                                       echo 
 string_limit_words(get_the_content(),21)."..."; 
                                    }
                        ?>
                            </div>
                            <a href="<? the_permalink();?>" 
 class="read_more">Read More</a>
                            <div style="clear:both"></div>
                    </div>
                    <?php $counter++; endwhile; ?>
                </div>
    <?php
    $post_types = get_post_types();
    unset($post_types['page'], $post_types['attachment'], 
 $post_types['revision'], $post_types['nav_menu_item']);

    if($post_type_2 == 'all') {
        $post_type_2_array = $post_types;
    } else {
        $post_type_2_array = $post_type;
    }
    ?>


            <?php
            $recent_posts = new WP_Query(array(
                'showposts' => $posts_2,
                'post_type' => $post_type_2_array,
                'cat' => $categories_2,
            ));
            ?>  
            <div class="line" style="margin-top:0px;">
                <h1>
                    <a href="<?php echo get_category_link( $categories_2 ) ?
 >"><?php echo $title_2; ?></a>
                </h1>
            </div>
                <div id="blog" class="owl-carousel">
                    <?php $counter = 1; while($recent_posts->have_posts()): 
 $recent_posts->the_post(); ?>
                    <div class="item">
                        <div class="media">
                            <div class="media-left media-middle">
                                <a href="<? the_permalink();?>">
                                    <img src="<?=the_image(($post->ID),5);?
 >" alt="<?php the_title(); ?>" title="<?php the_title(); ?>">
                                </a>
                                <div class="date_cat">
                                    <time><i class="glyphicon glyphicon-
 book"></i><a href="<?php echo get_category_link( $categories_2 ) ?>"> <?php 
 echo $title_2; ?></a> &nbsp;&nbsp;&nbsp;
                                    <i class="glyphicon glyphicon-calendar">
</i><?php the_time('j F Y'); ?></time>
                                </div>
                            </div>
                            <div class="media-body">
                                <h2 class="media-heading">
                                    <a href="<? the_permalink();?>"><?php 
 the_title(); ?></a>
                                </h2>
                                <p> 
                                    <?php
                                        if ( has_excerpt() ) {
                                                      the_excerpt();
                                                } else {
                                                   echo 
 string_limit_words(get_the_content(),35)."..."; 
                                                }
                                        ?>
                                </p>
                            </div>
                        </div>
                    </div>
                    <?php $counter++; endwhile; ?>
                </div>
    <?php
    $post_types = get_post_types();
    unset($post_types['page'], $post_types['attachment'], 
 $post_types['revision'], $post_types['nav_menu_item']);

    if($post_type_3 == 'all') {
        $post_type_3_array = $post_types;
    } else {
        $post_type_3_array = $post_type;
    }
    ?>


           <?php
    $recent_posts = new WP_Query(array(
        'showposts' => $posts_3,
        'post_type' => $post_type_3_array,
        'cat' => $categories_3,
    ));
    ?>
    <div class="line"><h1><a href="<?php echo get_category_link( 
 $categories_3 ) ?>"><?php echo $title_3; ?></a></h1></div>
    <?php $counter = 1; while($recent_posts->have_posts()): $recent_posts-
 >the_post(); ?>
    <?php if($counter==1): ?>
        <div class="item training">
            <div class="media">
                <!--<div class="media-left media-middle pull-right">
                    <a href="<? the_permalink();?>">
                        <img src="<?=the_image(($post->ID),6);?>" title="<?
 php the_title(); ?>" alt="<?php the_title(); ?>">
                    </a>
                </div>-->
                <div class="media-body ">
                    <h2 class="media-heading">
                        <a href="<? the_permalink();?>"><?= the_title();?>
 </a>
                    </h2>
                    <p>
                    <?php
                    if ( has_excerpt() ) {
                        the_excerpt();
                    } else {
                        echo string_limit_words(get_the_content(),10)."..."; 
                    }
                    ?>               
                    </p>
                </div>
            </div>
        </div>
        <div id="" class="owl-carousel trainingg">
    <?php else: ?>
            <div class="item">
                <a href="<? the_permalink();?>">
                    <img src="<?=the_image(($post->ID),7);?>" alt="<?php 
 the_title(); ?>" title="<?php the_title(); ?>">
                </a>
                <h2 class="media-heading">
                    <a href="<? the_permalink();?>"><?php the_title(); ?>
 </a>
                </h2>
            </div>
    <?php endif; ?>
        <?php $counter++; endwhile; ?>
    </div>
    <?php
    echo $after_widget;
}

function update($new_instance, $old_instance)
{
    $instance = $old_instance;

    $instance['show_excerpt'] = $new_instance['show_excerpt'];

    $instance['title'] = $new_instance['title'];
    $instance['post_type'] = 'all';
    $instance['categories'] = $new_instance['categories'];
    $instance['posts'] = $new_instance['posts'];
    $instance['show_images'] = true;

    $instance['title_2'] = $new_instance['title_2'];
    $instance['post_type_2'] = 'all';
    $instance['categories_2'] = $new_instance['categories_2'];
    $instance['posts_2'] = $new_instance['posts_2'];
    $instance['show_images_2'] = true;

    $instance['title_3'] = $new_instance['title_3'];
    $instance['post_type_3'] = 'all';
    $instance['categories_3'] = $new_instance['categories_3'];
    $instance['posts_3'] = $new_instance['posts_3'];
    $instance['show_images_3'] = true;



    return $instance;
}

function form($instance)
{
    $defaults = array('show_excerpt' => null,
        'title' => 'Recent Posts', 'post_type' => 'all', 'categories' => 
 'all', 'posts' => 4,
        'title_2' => 'Recent Posts', 'post_type_2' => 'all', 'categories_2' 
 => 'all', 'posts_2' => 4,
        'title_3' => 'Recent Posts', 'post_type_3' => 'all', 'categories_3' 
 => 'all', 'posts_3' => 4,);
    $instance = wp_parse_args((array) $instance, $defaults); ?>

    <p>
        <input class="checkbox" type="checkbox" <?php 
 checked($instance['show_excerpt'], 'on'); ?> id="<?php echo $this-
>get_field_id('show_excerpt'); ?>" name="<?php echo $this-
>get_field_name('show_excerpt'); ?>" /> 
        <label for="<?php echo $this->get_field_id('show_excerpt'); ?>">Show 
 excerpt</label>
    </p>

    <h3>Column One</h3>

    <p>
        <label for="<?php echo $this->get_field_id('title'); ?>">Title:
 </label>
        <input class="widefat" style="width: 216px;" id="<?php echo $this-
 >get_field_id('title'); ?>" name="<?php echo $this-
 >get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
    </p>

    <p>
        <label for="<?php echo $this->get_field_id('categories'); ?>">Filter 
 by Category:</label> 
        <select id="<?php echo $this->get_field_id('categories'); ?>" name="
 <?php echo $this->get_field_name('categories'); ?>" class="widefat 
 categories" style="width:100%;">
            <option value='all' <?php if ('all' == $instance['categories']) 
echo 'selected="selected"'; ?>>all categories</option>
            <?php $categories = 
get_categories('hide_empty=0&depth=1&type=post'); ?>
            <?php foreach($categories as $category) { ?>
            <option value='<?php echo $category->term_id; ?>' <?php if 
 ($category->term_id == $instance['categories']) echo 'selected="selected"'; 
 ?>><?php echo $category->cat_name; ?></option>
            <?php } ?>
        </select>
    </p>

    <p>
        <label for="<?php echo $this->get_field_id('posts'); ?>">Number of 
 posts:</label>
        <input class="widefat" style="width: 30px;" id="<?php echo $this-
 >get_field_id('posts'); ?>" name="<?php echo $this-
 >get_field_name('posts'); ?>" value="<?php echo $instance['posts']; ?>" />
    </p>

    <h3 style='margin-top: 40px;'>Column Two</h3>
    <p>
        <label for="<?php echo $this->get_field_id('title_2'); ?>">Title:
 </label>
        <input class="widefat" style="width: 216px;" id="<?php echo $this-
 >get_field_id('title_2'); ?>" name="<?php echo $this-
 >get_field_name('title_2'); ?>" value="<?php echo $instance['title_2']; ?>" 
/>
    </p>

    <p>
        <label for="<?php echo $this->get_field_id('categories_2'); ?
 >">Filter by Category:</label> 
        <select id="<?php echo $this->get_field_id('categories_2'); ?>" 
 name="<?php echo $this->get_field_name('categories_2'); ?>" class="widefat 
 categories" style="width:100%;">
            <option value='all' <?php if ('all' == 
 $instance['categories_2']) echo 'selected="selected"'; ?>>all 
 categories</option>
            <?php $categories = 
 get_categories('hide_empty=0&depth=1&type=post'); ?>
            <?php foreach($categories as $category) { ?>
            <option value='<?php echo $category->term_id; ?>' <?php if 
 ($category->term_id == $instance['categories_2']) echo 
'selected="selected"'; ?>><?php echo $category->cat_name; ?></option>
            <?php } ?>
        </select>
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('posts_2'); ?>">Number of 
 posts:</label>
        <input class="widefat" style="width: 30px;" id="<?php echo $this-
 >get_field_id('posts_2'); ?>" name="<?php echo $this-
 >get_field_name('posts_2'); ?>" value="<?php echo $instance['posts_2']; ?>" 
 />
    </p>

    <h3 style='margin-top: 40px;'>Column Three</h3>
    <p>
        <label for="<?php echo $this->get_field_id('title_3'); ?>">Title:
 </label>
        <input class="widefat" style="width: 216px;" id="<?php echo $this-
 >get_field_id('title_3'); ?>" name="<?php echo $this-
 >get_field_name('title_3'); ?>" value="<?php echo $instance['title_3']; ?>" 
 />
    </p>

    <p>
        <label for="<?php echo $this->get_field_id('categories_3'); ?
 >">Filter by Category:</label> 
        <select id="<?php echo $this->get_field_id('categories_3'); ?>" 
 name="<?php echo $this->get_field_name('categories_3'); ?>" class="widefat 
 categories" style="width:100%;">
            <option value='all' <?php if ('all' == 
 $instance['categories_3']) echo 'selected="selected"'; ?>>all 
 categories</option>
            <?php $categories = 
 get_categories('hide_empty=0&depth=1&type=post'); ?>
            <?php foreach($categories as $category) { ?>
            <option value='<?php echo $category->term_id; ?>' <?php if 
 ($category->term_id == $instance['categories_3']) echo 
 'selected="selected"'; ?>><?php echo $category->cat_name; ?></option>
            <?php } ?>
        </select>
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('posts_3'); ?>">Number of 
  posts:</label>
        <input class="widefat" style="width: 30px;" id="<?php echo $this-
 >get_field_id('posts_3'); ?>" name="<?php echo $this-
 >get_field_name('posts_3'); ?>" value="<?php echo $instance['posts_3']; ?>" 
/>
    </p>


    </p>
<?php }
}
?>

最佳答案

那是因为你少了一个

**</div>**

在

<?php dynamic_sidebar('Home_middle / Shark'); ?>

只需添加

</div>

在上述文件的末尾。

尝试添加此代码，这可能对您有帮助

<main>
    <section class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3  col-sm-4 col-sm-12 lr st-menu st-effect-1" id="menu-1">
                <?php dynamic_sidebar('Sidebar_left_home/Shark'); ?>
            </div>

            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 md">
                <?php dynamic_sidebar('Home_middle/Shark'); ?>
            </div>
  </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 rl st-menu st-effect-2" id="menu-2">
                <?php dynamic_sidebar('sidebar_right_home/Shark'); ?>
            </div>
        </div>
    </section>
</main>

关于php - div 元素进入前一个 div 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48059579/

上一篇：html - 底部 div 重叠

下一篇：javascript - jVectorMap 中的滚动控件

相关文章：

php - Laravel 至少有一个字段是有效的

php - 如何使用 Wampserver 3.0.0 64 安装 ImageMagick？

php - 使用 PHP 根据数组中的复选框值更新 mysql 数据库表

javascript - HTML 5 画笔颜色不会改变值

javascript - 如何更改光标图标以表示 Google 图表上的区域是可点击的？

php - 如何每秒自动更新mysql数据库？

javascript - 将整个网站放在主登录页面的 iframe 中有什么缺点？

html - 使用媒体查询将 CSS 应用于除 IE 之外的所有浏览器

javascript - NVD3 示例图表未显示

Javascript 固定页脚覆盖焦点

©2024 IT工具网  联系我们