HTML标记在代码中放置在他的容器之外

Question

我有 Wordpress（我的主题）中的这样一个php文件

<main>
<div></div>
...
<div></div>
</main>

在本地（MAMP）

一切都很好

在页面结果中，<div>离开父<main>，当我查看firefox上的页面代码时，我看到：

<main>
<div></div>
...
</main>
<div></div>

你是否尝试过这种行为？你有一些提示吗？

我的例子就是http://dev.orchestredepicardie.fr/concert/lorchestre-raconte/

这是源文件。 W3验证器说，例如，没有关闭，但它在文件中。

我发现错误。感谢您的指导和提示。 3天没有睡觉。我很开心 ！ 这是一个if条件不好的编码和给/ div没有打开标签div

<?php
/*
Template Name: Fiche_concert
Template Post Type: concert
*/
?>
<?php
/**
 * theme wopi
 * fichier template php dédié à la page fiche du concert
 * 
 */

 get_header();
 get_template_part('header','concerts');

?>

<main>
    <div class="main_wrapper p_relative">
					<div class="back_container">
					<p><a href="javascript: window.history.go(-1);" class="back black">&#8672; RETOUR</a></p>
				</div>
		<div class="article_container flex_wrap">
			<article>
				<section class="presentation">
					<div class="presentation_wrapper">
						<div class="presentation_genre brique">
							<p><?php $concert_description_genre =  wp_get_post_terms($post->ID, 'genre', array("fields" => "names"));
										echo $concert_description_genre[0]; ?></p>
						</div>
						<div class="presentation_courte p_relative">
							<?php if(has_post_thumbnail() ){ ?>
							<div class="concert_img_wrapper">
								<div class="concert_img firstplan">
									<img class="p_relative" src="<?php the_post_thumbnail_url(); ?>" alt="photo concert" title="Photo concert">
								</div>
							</div>
							<?php } ?>
							<div class="concert_titre_wrapper b_brique blanc">
								<div class="concert_titre">
									<p><?php the_title(); ?></p>
								</div>
							</div>
						</div>
					</div>
				</section>
				
				<?php if(empty(get_post_meta($post->ID, '_concert_sstitre', true)) && empty(get_post_meta($post->ID, '_concert_accroche', true)) ){} else {?>
				<section class="accroche b_brique">
					<div class="accroche_wrapper">
						<div class="accroche_sstitre blanc">
							 <p><?php echo get_post_meta($post->ID, '_concert_sstitre', true);?></p>
						</div>
						<div class="accroche_texte blanc">
							 <p><?php echo get_post_meta($post->ID, '_concert_accroche', true);?></p>
						</div>
					</div>
				</section>
				<?php } ?>
				<section class="programme b_brique_o">
					<div class="programme_wrapper">
									<?php for ($i=1; $i<21; $i++) {?>
									<p>
										<?php if(!empty(get_post_meta($post->ID, '_concert_prog_compositeur_'.$i, true))) 
											{
											echo '<span class="Programme_compositeur black">',get_post_meta($post->ID, '_concert_prog_compositeur_'.$i, true) , '</span>';} ?>
											<?php if(!empty(get_post_meta($post->ID, '_concert_prog_oeuvre_'.$i, true))) 
											{
											echo '<span class="Programme_oeuvre blanc">', get_post_meta($post->ID, '_concert_prog_oeuvre_'.$i, true), '</span>';
											}} ?>
									</p>
					</div>
				</section>

				<section class="distribution">
					<div class="distribution_wrapper flex_wrap">
<!-- Ensemble invité 1 -->
									<?php if(!empty(get_post_meta($post->ID, '_concert_ensemble_invite_1', true))) {?>
									<div class="concert_distribution_item flex">
										<div class="distribution_photo b_brique">
											<?php 
											$distribution_photo = get_page_by_title(get_post_meta($post->ID, '_concert_ensemble_invite_1', true),OBJECT,'collaboration');
											$distribution_lien = get_permalink($distribution_photo->ID);
											$distribution_photo = get_the_post_thumbnail($distribution_photo->ID);
											if(!empty($distribution_photo)) {?>
												 <a href="<?php echo $distribution_lien; ?>"><?php echo $distribution_photo; ?></a><?php } ?>
										</div>
										<div class="distribution_artiste">
											<?php $concert_distribution_poste = get_page_by_title(get_post_meta($post->ID, '_concert_ensemble_invite_1', true),OBJECT,'collaboration');
													$concert_distribution_poste =  wp_get_post_terms($concert_distribution_poste->ID, 'coproduction', array("fields" => "names"));
													echo '<p class="concert_distribution_poste">', $concert_distribution_poste[0], "</p>"; ?>
													<a href="<?php echo $distribution_lien; ?>"><p class="concert_distribution_nom"><?php echo get_post_meta($post->ID, '_concert_ensemble_invite_1', true);?></p></a>
										</div>
									</div><?php };?>
<!-- FIN Ensemble invité 1 -->
<!-- Ensemble invité 2 -->
									<?php if(!empty(get_post_meta($post->ID, '_concert_ensemble_invite_2', true))) {?>
									<div class="concert_distribution_item flex">
										<div class="distribution_photo b_brique">
											<?php 
											$distribution_photo = get_page_by_title(get_post_meta($post->ID, '_concert_ensemble_invite_2', true),OBJECT,'collaboration');
											$distribution_lien = get_permalink($distribution_photo->ID);
											$distribution_photo = get_the_post_thumbnail($distribution_photo->ID);
											if(!empty($distribution_photo)) {?>
												<a href="<?php echo $distribution_lien; ?>"><?php echo $distribution_photo; ?></a><?php } ?>
										</div>
										<div class="distribution_artiste">
											<?php $concert_distribution_poste = get_page_by_title(get_post_meta($post->ID, '_concert_ensemble_invite_2', true),OBJECT,'collaboration');
													$concert_distribution_poste =  wp_get_post_terms($concert_distribution_poste->ID, 'coproduction', array("fields" => "names"));
													echo '<p class="concert_distribution_poste">', $concert_distribution_poste[0], "</p>"; ?>
													<a href="<?php echo $distribution_lien; ?>"><p class="concert_distribution_nom"><?php echo get_post_meta($post->ID, '_concert_ensemble_invite_2', true);?></p></a>
										</div>
									</div><?php };?>
<!-- FIN Ensemble invité 2 -->
<!-- Groupe ODP -->
									<?php if(!empty(get_post_meta($post->ID, '_concert_distribution_ensemble_odp', true))) {?>
									
									<div class="concert_distribution_item flex">
										<div class="distribution_photo b_brique">
											<?php 
											$distribution_photo = get_page_by_title(get_post_meta($post->ID, '_concert_distribution_ensemble_odp', true),OBJECT,'artiste');
											$distribution_lien = get_permalink($distribution_photo->ID);
											$distribution_photo = get_the_post_thumbnail($distribution_photo->ID);
											if(!empty($distribution_photo)) {?>
												<a href="<?php echo $distribution_lien; ?>"><?php echo $distribution_photo; ?></a><?php } ?>
										</div>
										<div class="distribution_artiste">
											<?php $concert_distribution_poste = get_page_by_title(get_post_meta($post->ID, '_concert_distribution_ensemble_odp', true),OBJECT,'artiste');
													$concert_distribution_poste =  wp_get_post_terms($concert_distribution_poste->ID, 'poste', array("fields" => "names"));
													echo '<p class="concert_distribution_poste">', $concert_distribution_poste[0], "</p>"; ?>
													<a href="<?php echo $distribution_lien; ?>"><p class="concert_distribution_nom"><?php echo get_post_meta($post->ID, '_concert_distribution_ensemble_odp', true);?></p></a>
										</div>
									</div><?php };?>
<!-- FIN Groupe ODP -->									
<!-- ODP -->
									<?php if(get_post_meta($post->ID, '_concert_distribution_odp', true)=="oui") {?>
									<div class="concert_distribution_item flex">
										<div class="distribution_photo b_brique">
											<img class="p_relative" src="<?php bloginfo('template_directory');?>/assets/images/orchestre_200.jpg)" alt="photo entete" title="L'Orchestre de Picardie photo">
										</div>
										<div class="distribution_artiste">
										<p class="concert_distribution_nom"><?php echo "Orchestre de Picardie";?></p>
										</div>
									</div><?php };?>
<!-- FIN ODP -->
<!-- Direction 1 -->
									<?php if(!empty(get_post_meta($post->ID, '_concert_direction_1', true))) {?>
									<div class="concert_distribution_item flex">
										<div class="distribution_photo b_brique">
											<?php 
											$distribution_photo = get_page_by_title(get_post_meta($post->ID, '_concert_direction_1', true),OBJECT,array('collaboration','artiste'));
											$distribution_lien = get_permalink($distribution_photo->ID);
											$distribution_photo = get_the_post_thumbnail($distribution_photo->ID);
											if(!empty($distribution_photo)) {?>
												<a href="<?php echo $distribution_lien; ?>"><?php echo $distribution_photo; ?></a><?php } ?>
										</div>
										<div class="distribution_artiste">
											<?php $concert_distribution_poste = get_page_by_title(get_post_meta($post->ID, '_concert_direction_1', true),OBJECT,array('collaboration','artiste'));
													$concert_distribution_poste =  wp_get_post_terms($concert_distribution_poste->ID, 'poste', array("fields" => "names"));
													echo '<p class="concert_distribution_poste">', $concert_distribution_poste[0], "</p>"; ?>
													<a href="<?php echo $distribution_lien; ?>"><p class="concert_distribution_nom"><?php echo get_post_meta($post->ID, '_concert_direction_1', true);?></p></a>
										</div>
									</div><?php };?>
<!-- FIN Direction 1 -->
<!-- Direction 2 -->
									<?php if(!empty(get_post_meta($post->ID, '_concert_direction_2', true))) {?>
									<div class="concert_distribution_item flex">
										<div class="distribution_photo b_brique">
											<?php 
											$distribution_photo = get_page_by_title(get_post_meta($post->ID, '_concert_direction_2', true),OBJECT,array('collaboration','artiste'));
											$distribution_lien = get_permalink($distribution_photo->ID);
											$distribution_photo = get_the_post_thumbnail($distribution_photo->ID);
											if(!empty($distribution_photo)) {?>
												<a href="<?php echo $distribution_lien; ?>"><?php echo $distribution_photo; ?></a><?php } ?>
										</div>
										<div class="distribution_artiste">
											<?php $concert_distribution_poste = get_page_by_title(get_post_meta($post->ID, '_concert_direction_2', true),OBJECT,array('collaboration','artiste'));
													$concert_distribution_poste =  wp_get_post_terms($concert_distribution_poste->ID, 'poste', array("fields" => "names"));
													echo '<p class="concert_distribution_poste">', $concert_distribution_poste[0], "</p>"; ?>
													<a href="<?php echo $distribution_lien; ?>"><p class="concert_distribution_nom"><?php echo get_post_meta($post->ID, '_concert_direction_2', true);?></p></a>
										</div>
									</div><?php };?>
<!-- FIN Direction 2 -->
<!-- Artistes Invité 1 à 10 -->
									<?php   for ($i=1; $i<11; $i++) {?>
									<?php if(!empty(get_post_meta($post->ID, '_concert_artiste_inv_'.$i, true))) {?>
									<div class="concert_distribution_item flex">
										<div class="distribution_photo b_brique">
											<?php 
											$distribution_photo = get_page_by_title(get_post_meta($post->ID, '_concert_artiste_inv_'.$i, true),OBJECT,'collaboration');
											$distribution_lien = get_permalink($distribution_photo->ID);
											$distribution_photo = get_the_post_thumbnail($distribution_photo->ID);
											if(!empty($distribution_photo)) {?>
												<a href="<?php echo $distribution_lien; ?>"><?php echo $distribution_photo; ?></a><?php } ?>
										</div>
										<div class="distribution_artiste">
											<?php $concert_distribution_poste = get_page_by_title(get_post_meta($post->ID, '_concert_artiste_inv_'.$i, true),OBJECT,'collaboration');
													$concert_distribution_poste =  wp_get_post_terms($concert_distribution_poste->ID, 'poste', array("fields" => "names"));
													echo '<p class="concert_distribution_poste">', $concert_distribution_poste[0], "</p>"; ?>
													<a href="<?php echo $distribution_lien; ?>"><p class="concert_distribution_nom"><?php echo get_post_meta($post->ID, '_concert_artiste_inv_'.$i, true);?></p></a>
										</div>
									</div><?php };?><?php }?>
<!-- FIN Artistes Invité 1 à 10 -->
<!-- Artistes 1 à 10 -->
									<?php   for ($i=1; $i<11; $i++) {?>
									<?php if(!empty(get_post_meta($post->ID, '_concert_artiste_'.$i, true))) {?>
									<div class="concert_distribution_item flex">
										<div class="distribution_photo b_brique">
											<?php 
											$distribution_photo = get_page_by_title(get_post_meta($post->ID, '_concert_artiste_'.$i, true),OBJECT,'artiste');
											$distribution_lien = get_permalink($distribution_photo->ID);
											$distribution_photo = get_the_post_thumbnail($distribution_photo->ID);
											if(!empty($distribution_photo)) {?>
												<a href="<?php echo $distribution_lien; ?>"><?php echo $distribution_photo; ?></a><?php } ?>
										</div>
										<div class="distribution_artiste">
											<?php $concert_distribution_poste = get_page_by_title(get_post_meta($post->ID, '_concert_artiste_'.$i, true),OBJECT,'artiste');
													$concert_distribution_poste =  wp_get_post_terms($concert_distribution_poste->ID, 'poste', array("fields" => "names"));
													echo '<p class="concert_distribution_poste">', $concert_distribution_poste[0], "</p>"; ?>
													<a href="<?php echo $distribution_lien; ?>"><p class="concert_distribution_nom"><?php echo get_post_meta($post->ID, '_concert_artiste_'.$i, true);?></p></a>
										</div>
									</div><?php };?><?php }?>
<!-- FIN Artistes 1 à 10 -->


					</div>
				</section>





			</article>






			<aside>

				<section class="aside_top b_brique p_relative">
					<div class="aside_top_wrapper">
						<div class="duree blanc">
							<div class="duree_wrapper">
								<p><span class="duree_titre">Durée </span><span class="duree_texte"><?php echo get_post_meta($post->ID, '_concert_duree', true); ?></span></p>
							</div>
						</div>
					</div>
				</section>
				
				<div class="choix"><p>&#8675; Cliquer sur la salle</p></div>
				<section class="dates b_brique">
					<div class="dates_wrapper">
						  <?php for ($i=1; $i<10; $i++) {
						  $event_date = get_post_meta($post->ID, '_concert_date_'.$i, true);

						 if(!empty($event_date)){?>
						<section class="date_item">
								<div class="date_jour">
									<p>
									<?php 
											echo '<span class="concert_pratique_date blanc">', mysql2date('l j F Y', get_post_meta($post->ID, '_concert_date_'.$i, true)), '</span>';
											echo '<span class="concert_pratique_heure">', get_post_meta($post->ID, '_concert_horaire_'.$i, true), '</span>'; ?>
									</p>

								</div>

								<?php
								if(!empty(get_post_meta($post->ID, '_concert_lieu_'.$i, true))){ 
								?>	

								<div class="date_ville">
									<div>
											 <?php
												$concert_pratique_ville = get_page_by_path(get_post_meta($post->ID, '_concert_lieu_'.$i, true),OBJECT,'lieu');
												$concert_pratique_ville =  wp_get_post_terms($concert_pratique_ville->ID, 'lieu', array("fields" => "names"));
											 if(!empty($concert_pratique_ville[0])){?>

											 <div class="concert_pratique_ville line"><p><?php echo $concert_pratique_ville[0]; ?></p></div>
											 <div class="concert_pratique_salle line">
												 <p><?php echo get_page_by_path(get_post_meta($post->ID, '_concert_lieu_'.$i, true),OBJECT,'lieu')->post_title; ?></p>
											 </div>
											 <?php } ?>
									</div>
								</div>
												<?php if(!empty(get_post_meta($post->ID, '_concert_lieu_'.$i, true))){ ?>
				<div  id="salle_info_pratique_item_<?php echo $i; ?>" class="salle_info_pratique">
					<div class="salle_info_pratique_wrapper ">

						<div class="salle_info_pratique_item">
							<div class="salle_info_pratique_item_wrapper">

								<div class="salle_lieu">

								<?php
										echo '<p class="salle_lieu_salle">',get_page_by_path(get_post_meta($post->ID, '_concert_lieu_'.$i, true),OBJECT,'lieu')->post_title, '</p>';
										if(!empty($concert_pratique_ville[0])){
										 echo '<p class="salle_lieu_ville">', $concert_pratique_ville[0], '</p>';}

										?>
								</div>


								<?php 
									$salle_post = get_page_by_path(get_post_meta($post->ID, '_concert_lieu_'.$i, true),OBJECT,'lieu');
									$salle_url = get_post_meta($salle_post->ID, '_concert_billeterie', true);
									if(!empty($salle_url)) {?>
								<div class="salle_reserver">
										<p><a href="<?php echo $salle_url; ?>" target="_blank">Réserver</a></p><?php } ?>
								</div>

								<div class="salle_photo">
										<?php 
										$salle_photo = get_the_post_thumbnail($salle_post->ID);
										if(!empty($salle_photo)) {?>
											<?php echo $salle_photo; ?><?php } ?>
								</div>
								<div class="salle_adresse">
									<?php 
										$salle_adresse = get_post_meta($salle_post->ID, '_salle_adresse', true);
										if(!empty($salle_adresse)) {?>
											<p class="salle_adresse_texte"><?php echo $salle_adresse; ?></p><?php } ?>
									<?php 
										$salle_phone = get_post_meta($salle_post->ID, '_salle_phone', true);
										if(!empty($salle_phone)) {?>
											<p class="salle_phone_texte"><?php echo $salle_phone; ?></p><?php } ?>
									<?php 
										$salle_mail = get_post_meta($salle_post->ID, '_salle_mail', true);
										if(!empty($salle_mail)) {?>
											<p class="salle_mail_texte line"><a href="mailto:<?php echo $salle_mail; ?>">Envoyer un mail</a></p><?php } ?>
									<?php 
										$salle_url = get_post_meta($salle_post->ID, '_salle_url', true);
										if(!empty($salle_url)) {?>
											<p class="salle_url_texte line"><a href="<?php echo $salle_url; ?>" target="_blank">Site internet</a></p><?php } ?>

								</div>

								<?php if(!empty(get_post_meta($salle_post->ID, '_concert_tarif_1', true))) { ?>
								<div class="salle_Tarif">
									<p class="salle_Tarif_titre">Tarifs</p>
									<?php 		
										$salle_tarif_1 = get_post_meta($salle_post->ID, '_concert_tarif_1', true);
										$salle_tarif_2 = get_post_meta($salle_post->ID, '_concert_tarif_2', true);
										$salle_tarif_3 = get_post_meta($salle_post->ID, '_concert_tarif_3', true);
										$salle_tarif_4 = get_post_meta($salle_post->ID, '_concert_tarif_4', true);
										$salle_tarif_5 = get_post_meta($salle_post->ID, '_concert_tarif_5', true);
										if(!empty($salle_tarif_1)) {?><p><?php echo $salle_tarif_1; ?></p><?php };
										if(!empty($salle_tarif_2)) {?><p><?php echo $salle_tarif_2; ?></p><?php };
										if(!empty($salle_tarif_3)) {?><p><?php echo $salle_tarif_3; ?></p><?php };
										if(!empty($salle_tarif_4)) {?><p><?php echo $salle_tarif_4; ?></p><?php };
										if(!empty($salle_tarif_5)) {?><p><?php echo $salle_tarif_5; ?></p><?php };
										?>
								</div>

								<?php } ?>
								<div class="salle_description">
									<?php 
										$salle_description = get_post_field('post_content', $salle_post->ID);
										if(!empty($salle_description)) {?>
											<p>
												<?php 
												$salle_description = apply_filters('the_content', $salle_description);
												$salle_description = str_replace(']]>', ']]&gt;', $salle_description);
												echo $salle_description; ?>
											</p>
											<?php } ?>
								</div>
							</div>
						</div>





					</div>


				</div>
				<?php } ?>

						</section>	
						<?php }}} ?>

					</div>
				</section>



			</aside>
			

			
        </div>
			<div class="" >
				<?php if(!empty(get_post_meta($post->ID, '_concert_video', true))){?>
				<section class="video">
					<div class="video_wrapper black">
						<iframe id="ytplayer" type="text/html" width="400" height="253.125"
						src="https://www.youtube.com/embed/<?php echo get_post_meta($post->ID, '_concert_video', true); ?>"
						frameborder="0" allowfullscreen></iframe>
					</div>
				</section>
				<?php } ?>
				<section class="description">
					<div class="description_wrapper black">
						<?php while(have_posts())  : the_post(); ?>
						<?php the_content(); ?>          
						<?php endwhile; ?>
					</div>
				</section>
			</div>	
		<section class="partenaire">
			<div class="partenaire_wrapper black">
				<div class="partenaire_titre"><p>Avec le soutien de</p></div>
				<div class="partenaire_liste flex_wrap">
							
							<?php 
							for ($i=1; $i<16; $i++) {
							if(!empty(get_post_meta($post->ID, '_concert_partenaire_logo_'.$i, true))) {?>
							<div class="partenaire_item">
								<div class="partenaire_photo">
									<?php 
									$partenaire_photo = get_page_by_title(get_post_meta($post->ID, '_concert_partenaire_logo_'.$i, true),OBJECT,'administration');
									$partenaire_photo = get_the_post_thumbnail($partenaire_photo->ID);
									if(!empty($partenaire_photo)) {?>
										<?php echo $partenaire_photo; ?><?php } ?>
								</div>
							</div><?php }};?>
				</div>
				</div>
		</section>
    </div>
</main>

<?php
 get_footer();

?>

Answer 1

您有很多html标记错误，例如未关闭的<div>和<section>，这些将导致显示错误和内容从容器和侧边栏流出。使用W3C Validator https://validator.w3.org/检查您的代码。

有关错误和行号，请​​参阅Showing results for http://dev.orchestredepicardie.fr/concert/lorchestre-raconte/。需要修复的html yoiu将在不同的主题文件中，如header.php，page.php等;你需要检查你的主题。

您可以忽略有关“JavaScript属性不需要类型属性”的警告和缺少的标题，但修复未关闭的div和其他明显错误。