Div正确显示前3行后，神秘地向下移动 [英] Div is mysteriously moving down after displaying first 3 rows properly

问题描述

Div正确显示前3行后，神秘地向下移动。我可能会错了。所有图像具有相同的宽度和高度。我犯了一个愚蠢的错误？

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>";
}
?>

推荐答案

你需要添加高度的组件，因为我可以看到，问题是由于不一致的高度，你需要应用相同的高度到所有的组件，将解决你的问题。你可以通过css应用，或者你可以使用jquery计算最大div的高度，并适用于休息。

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.

使用这个jQuery添加same-height类，其中有.col-sm-4，以便它不会与其他组件冲突。

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);
    });
});

演示检查链接 http://jsfiddle.net/ghayes/fqMK6/4/

这篇关于Div正确显示前3行后，神秘地向下移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！