正确显示前 3 行后，Div 神秘地向下移动 [关闭]

Question

在正确显示前 3 行后，Div 神秘地向下移动。我可能在哪里出错了。所有图像的宽度和高度相同。我犯了一个愚蠢的错误吗？请找到所附图片。

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

Answer 1

如果您查看空白上方的项目，您会发现其文本内容比其他元素长 1 行。它推动了项目的高度，使其比其他所有项目都长。由于浮动的性质，下一行的第一项堆叠在其右侧而不是下方。

因此，解决方法是设置项目高度限制以确保所有项目具有相同的高度（将您的 min-height 更改为 height），或者如果您想要一个类似砖块的堆栈，您需要一个类似 @ 的插件987654321@

Answer 2

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

使用这个 jQuery 在你有 .col-sm-4 的地方添加“same-height”类，这样它就不会与其他组件冲突。

$(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/