我的设计有两列,右边是右边,但是在左边的列下面。为什么?

时间:2015-04-09 20:56:57

标签: css

我的设计有两列.leftcolumn& .rightcolumn。他们假设在我的设计中彼此相邻,它们应该是左右两边,但.rightcolumn低于右边的.leftcolumn。为什么呢?

CSS:

.coursecontent {
     width: 1200px;
}
.leftcolumn{
    width: 860px;
    float: left;
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #efefef;
}
.rightcolumn{
    float: right;
    width: 300px;
}

页面:

<!DOCTYPE html>
<html>     
<?php 
    /**
 * Template Name: Single event template
 */
get_header(); ?>
<div class="coursecontent">  
<div class="leftcolumn">    
      <?php while ( have_posts() ) : the_post();  ?> 
   <h1> <?php the_title();  ?> </h1>
      </br> <?php 
      echo '<div class="tagsremove">';  
 global $post;
$nextTagThumb='-1';
$tags = wp_get_post_tags($post->ID);
foreach ($tags as $tag) :
if ($tags) {
$what_tag = $tags[($nextTagThumb+'1')]->term_id;
$args=array(
'tag__in' => array($what_tag),
'post__not_in' => array($post->ID),
'showposts'=>100,
'caller_get_posts'=>1
); ?>
<div class="tags_course_single"> 
<h5> Similar courses: </h5> 
<?php $my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<a href="<?php echo get_permalink(); ?>"> <?php the_title(); ?></a>,
<?php endwhile;
}
wp_reset_query();
$nextTagThumb = ($nextTagThumb+1);
}
endforeach; 
?> </div> <br />  
<?php echo '</div>'; ?> 
<div class="imageandtext">  
<div class="mainimage">  
  <?php if ( has_post_thumbnail() ) { the_post_thumbnail();}  ?> 
</div>  
 <?php the_content(); ?> 
 </div> 
    <?php  endwhile; ?>
        </div> 
<div class="rightcolumn">  
<div class="countersingle">  
  <h4> When this course starts: </h4>
  <h6> (there maybe more than one possible start date) </h6>
  <?php
$count = 0;
$your_repeater = get_field('add_date');
if($your_repeater){
   while( have_rows('add_date') ): the_row();
   $count++;
   $my_field = get_sub_field('course_date');
   if ($count == 1) {
$todays_date = date("Y-m-d");
$today = strtotime($todays_date);
$expiration_date = strtotime($my_field);
if ($expiration_date > $today) {
       $date12 = new DateTime($my_field);
    $date13 = new DateTime($todays_date); 
$diff=date_diff($date12,$date13);
echo    '1. ' . $my_field ;
echo '<div class="reddays"> in '. $diff->format("%R%a days.") .'<a href="'.get_page_link('10') .'">    Contact us now</a></div>';
} else {
    echo '' ;
}   }
if ($count == 2) {  
    $todays_date = date("Y-m-d");
$today = strtotime($todays_date);
$expiration_date = strtotime($my_field);
if ($expiration_date > $today) {
    $date12 = new DateTime($my_field);
    $date13 = new DateTime($todays_date); 
$diff=date_diff($date12,$date13);
echo  '2. '  .$my_field ;
echo '<div class="reddays"> in '. $diff->format("%R%a days.") .'<a href="'.get_page_link('10') .'">    Contact us now</a></div>';
} else {
    echo  '' ;
}}
   if ($count == 3) {
    $todays_date = date("Y-m-d");
$today = strtotime($todays_date);
$expiration_date = strtotime($my_field);
if ($expiration_date > $today) {
    $date12 = new DateTime($my_field);
    $date13 = new DateTime($todays_date); 
$diff=date_diff($date12,$date13);
echo  '3. '  .$my_field ;
echo '<div class="reddays"> in '. $diff->format("%R%a days.") .'<a href="'.get_page_link('10') .'">    Contact us now</a></div>';
} else {
    echo '' ;
}       }
   if ($count == 4) {
       }
   if ($count == 5) {
       }
   echo '</ul>';
endwhile;  
}?>
</div> 
<div class="mathsandenglish"> 
  <h4> Improve your maths and English at the same time </h4> 
<?php $key_1_value = get_post_meta( get_the_ID(), 'twitter_embed', true );
if( ! empty( $key_1_value ) ) {
  echo $key_1_value; } ?>
</div> 
</div>
 </div> 
<?php get_footer(); ?>
 </html> 

1 个答案:

答案 0 :(得分:0)

在左栏的foreach ($tags as $tag) :循环中,您打开了<div class="tags_course_single">但是没有关闭它,看起来您正试图在循环后关闭它,endforeach; ?> </div>所以我会将</div>移动到循环中的$nextTagThumb = ($nextTagThumb+1);之后。

此外,您的</br>应该<br />靠近顶部:)

此外,您的html中没有<head>标记,所有其他内容都应位于<body>标记内。