2017-01-13 1 views
1

저는 페이지 템플릿에 있는데 태그에 전체 div를 래핑하려고합니다. 두 개의 머리글 태그 요소가 아니라 전체 div 요소를 클릭 할 수있게하려고합니다. 태그가 깨져서 너무 빨리 자릅니다. 중첩 문제? 나는 잘 모르겠다 - 다른 것들을 많이 시도했다. 다음 코드는 ... 라인 <a href="<?php echo esc_url($education['lightbox']);?>"> 내가Wordpress가 앵커 태그에서 div를 감싸지 못하게합니다.

<section id="<?php echo esc_attr($menu_id);?>" class="section section-education"> 
       <div class="animate-up"> 
        <?php if($title):?> 
         <h2 class="section-title"><?php echo esc_html($title);?></h2> 
        <?php endif;?> 
        <?php if($education_fields):?> 
        <div class="timeline"> 
         <div class="timeline-bar"></div> 
         <div class="timeline-inner clearfix myBox"> 
          <?php        
          $i=0;foreach ($education_fields as $education): 
            if ($i % 2 == 0): 
             $class = 'timeline-box-left'; 
             $class_inner = 'animate-right'; 
            else: 
             $class = 'timeline-box-right'; 
             $class_inner = 'animate-left';          
            endif; 
          ?> 

           <a href="<?php echo esc_url($education['lightbox']);?>"> 
           <div class="timeline-box timeline-box-compact <?php echo esc_attr($class); ?>"> 
            <span class="dot"></span> 

            <div class="timeline-box-inner <?php echo esc_attr($class_inner); ?>"> 
             <?php if($education['years']):?> 
              <span class="arrow"></span> 
              <div class="date"><?php echo esc_html($education['years']);?></div> 
             <?php 
             endif; 
             if($education['education_name']): 
              ?> 
              <h3><?php echo esc_html($education['education_name']);?></h3> 
             <?php 
             endif; 
             if($education['education_place']): 
              ?> 
              <h4> 
              <?php if($education['education_place_link']):?> 
               <a href="<?php echo esc_url($education['education_place_link']);?>"> 
              <?php endif;?> 
              <?php echo esc_html($education['education_place']);?> 
              <?php if($education['education_place_link']):?> 
               </a> 


              <?php endif;?> 
              </h4> 
             <?php endif;?> 

            </div> 
           </div> 
           </a> 
          <?php $i++; endforeach; ?> 
         </div> 
        </div> 
        <?php endif;?> 
        <?php if($custom_editor):?> 
         <div class="section-txt-btn"><?php echo $custom_editor;?></div> 
        <?php endif;?> 
       </div> 
      </section> 

을 포함하기 위해 노력하고있어 앵커 태그입니다 참조되며,이 반환되는 내용이다 :

<div class="timeline-box timeline-box-compact timeline-box-left" style=""><a href="http://johnhoich.com/wp-content/uploads/2015/11/logo-compass-1.png" data-featherlight="image"> 
            <span class="dot"></span> 

            </a><div class="timeline-box-inner animate-right animated"><a href="http://johnhoich.com/wp-content/uploads/2015/11/logo-compass-1.png" data-featherlight="image"> 
                         <span class="arrow"></span> 
         <div class="date">1974 - 1976</div>                     <h3>High School</h3> 
                         </a><h4><a href="http://johnhoich.com/wp-content/uploads/2015/11/logo-compass-1.png" data-featherlight="image"></a> 

Westside

+0

@ kritikaTalwar : 편집 결과 일부 코드 서식이 제거되어 거부되었습니다. 또한 코드 소개에 굵은 체 형식을 추가 할 필요가 없으며 더 쉽게 읽을 수 있습니다. – halfer

+0

@halfer이 문제를 해결하는 방법을 알고 있습니까? – Mike

답변

0

이 알아 낸 :

솔루션

: 는 I는 DIV/섹션의 끝에 <a> 태그를두고 약간 CSS를 첨가 : 그것은 절대 만들어, 위쪽, 아래쪽, 오른쪽, 따라서 커버의 폭과 높이를 조정하여 0 = 왼쪽으로 전체 콘텐츠 영역과 함께 Z- 색인을 올립니다. 이렇게하면 div를 감싸는 대신 링크가 덮여있게됩니다.

0

이 링크를 가지고 있습니다 ...

,838, 당신은 당신이 인용 <a> 태그로 포장 된 DIV 내부

...하지만 링크 내부 링크가 가능하지 않다, 그것은 확실히 HTML을 깰 것입니다 ...

관련 문제