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），或者如果您想要类似砖块的堆栈，则需要一个插件，如Masonry.js

Answer 2

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

使用此jQuery add＆＃34; same-height＆＃34;你有.col-sm-4的类，这样它就不会与其他组件发生冲突。

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

在正确显示前3行后，Div神秘地向下移动

2 个答案: