How to split a loop into two columns

Question

I am running a dwfocus news website, I would like to split my li loop catagory in two section, can some let me know how can i proceed forward, thanks.

<div class="headlines" data-interval="<?php echo ($interval>0)?$interval*1000:'false'; ?>">
        <ul>
        <?php  
            $i = 0;
            while ( $r->have_posts() ) {
                $r->the_post();
        ?>
            <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="time_diff"><?php echo ' - ' . dw_human_time_diff( get_the_time('U'), current_time('timestamp') ); ?></span></li>
        <?php } ?>     
        </ul>
    </div>

Answer 1

You will need to create css classes for a left and right column (you can use bootstrap if you like) after creating the classes try this

<div class="headlines" data-interval="<?php echo ($interval>0)?$interval*1000:'false'; ?>">
    <ul>
    <?php  
        $i = 0;
        while ( $r->have_posts() ) {
            $r->the_post();
        if($i % 2 == 0){ //even line
    ?>
        <li class="left-col"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="time_diff"><?php echo ' - ' . dw_human_time_diff( get_the_time('U'), current_time('timestamp') ); ?></span></li>
    <?php } else { ?>
        <li class="right-col"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span class="time_diff"><?php echo ' - ' . dw_human_time_diff( get_the_time('U'), current_time('timestamp') ); ?></span></li>
    <?php };
      $i++; }
    ?>
    </ul>
</div>

Answer 2

Here is the code which you can get it show first 10 on left and after that show right side

<div class="headlines" data-interval="<?php echo ($interval>0)?$interval*1000:'false'; ?>">
<ul class="headline_left">
<?php  
   $i = 1;
    while ( $r->have_posts() ) {
       $r->the_post(); ?>
        <li>
            <?php the_title( '<a href="' . get_permalink() . '">', '</a>' ); ?>
            <span class="time_diff"><?php echo ' - ' . dw_human_time_diff( get_the_time('U'), current_time('timestamp') ); ?></span>
        </li>
        <?php 
        if($i == 10){ 
            echo "</ul><ul class='headline_right'>";
        } 
        $i++; 
    }
?>
</ul>  
</div>  

CSS code:

.headline_left{
    float:left;
    width:42%;
    padding-right:6%;
   /*   margin:1px;*/
    min-height:40px;
   /*padding-left: 1px;*/
}
.headline_right{
    float:left;
    width:42%;
    padding-right:6%;
    margin:0;
    min-height:40px;
}