Div is mysteriously moving down after displaying f

问题:

Div is mysteriously moving down after displaying first 3 rows properly. where am I possibly going wrong. All the images are of the same width and height. Am I committing a silly mistake? Please find the image attached.

<?php 
// start first row
echo "<hr class='margin-bottom-40'>";
echo "<div class='row blog blog-medium margin-bottom-40'>";
foreach ($m->result() as $row)  {
    $Player=$row->image;
    echo "<div class='col-sm-4'>";
    echo "<div class='news-v2-badge'>
    <img class='img-newresponsive' style='' src='http://opunletter.com/" .  $Player . "'";
    echo "</div>";
    echo "<p><span>";
    $stamp = strtotime($row->date);
    echo date("d", $stamp); 
    echo "</span><small>"; echo date("M", $stamp); echo"</small></p>";
    echo "<div class='post-caption'>";
    echo "<ul class='post-inline block-grid-v1-add-info'>";
    echo "<li><a href='#'><i class='fa fa-eye'></i> 34039</a></li>";
    echo "<li>";
    $ip=$_SERVER['REMOTE_ADDR'];
    ?>
    <a href="<?php $this->load->helper('url'); echo base_url();?>index.php/welcome/upvote?id=<?php echo $row->open_id; ?>&ip=<?php echo $ip;?>" name="up">
    <?php echo "<i class='fa fa-thumbs-o-up'>"; ?>
    <div id="upnumber"><?php echo $row->up; ?></div><?php echo "</i>"; ?></a>
    <?php
    echo "</li>"; 
    echo "<li>";?>

    <a href="<?php $this->load->helper('url'); echo base_url();?>index.php/Welcome/downvote?id=<?php echo $row->open_id; ?>&ip=<?php echo $ip;?>" name="down">
    <?php echo "<i class='fa fa-thumbs-o-down'>"; ?>
    <div id="downnumber"><?php echo "-".$row->down; ?>
    </div>
    <?php echo "</i>"; ?>
    </a>

    <?php
    echo "</li>";
    echo "</ul>"; 
    echo "</div>";
    echo "</div>";
    echo "<div class='news-v2-desc'>";
    echo "<h3>";
    ?>
    <a href="<?php $this->load->helper('url'); echo base_url();?>index.php/Welcome/indexes?id=<?php $data=$row->open_id; echo $data; ?>"><?php $ima=$row->title; echo $ima; ?></a>
    <?php
    echo "</h3>";
    echo "<small>By Admin | California, US | In <a href='#'>Art</a></small>";
    echo "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio.</p>";
    echo "</div>";
    echo "</div>";
}
?>

回答1:

You Need to add height to the component as I can see the issue is causing due to in-consistent height you need to apply same height to all the component that will solve your problem. You can apply that via css or you can use jquery to calculate the height of biggest div and apply to rest.

Use this jQuery add "same-height" class where you have .col-sm-4 so that it will not conflict with other component.

$(document).ready(function() {
    var maxHeight = -1;
    $('.same-height').each(function() {
      maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    });
    $('.same-height').each(function() {
      $(this).height(maxHeight);
    });
});

For demo check link http://jsfiddle.net/ghayes/fqMK6/4/

回答2:

If you look at the item above the white space you will see that its text content is longer than the other elements by 1 line. It's pushing the item's height, making it longer than all others. Due to the nature of float, the first item on the next line stack to the right of it instead of below.

The fix is thus, setting a limit to items' height to ensure all items have the same height (changing your min-height to height), or if you want a brick-like stack you need a plugin like Masonry.js