图像未按预期对齐


Images does not align as expected

我的所有图像都按顺序放置,但在第三行中,我的图像与上面的图像不对齐。我不知道问题是什么。事实上,直到管理员上传了一个空白文件的图像图像,它才正常工作,但问题已经解决,当再次上传图像时,问题开始出现。这是我的问题的链接。

http://hurdec.org.np/about_us.php

                <?php 
            $about = sliding_image();
            while($about_fetch=mysql_fetch_array($about)){ 
        ?> 
        <div class="row">
            <div class="span3">
                <div class="team-member">
                    <div class="team-member-preview"> 
                        <img src="images/<?php echo $about_fetch["image_name"];?>" alt="">
                        <div class="team-member-hover">
                            <div class="social-media fixed">
                                <a class="youtube-icon social-icon" href="#">
                                    <i class="fa fa-youtube"></i>
                                </a>
                                <a class="pinterest-icon social-icon" href="#">
                                    <i class="fa fa-pinterest"></i>
                                </a>
                                <a class="facebook-icon social-icon" href="#">
                                    <i class="fa fa-facebook"></i>
                                </a>
                                <a class="twitter-icon social-icon" href="#">
                                    <i class="fa fa-twitter"></i>
                                </a>
                            </div><!-- end .social-media -->
                        </div><!-- end .team-member-hover -->
                    </div><!-- end .team-member-preview -->
                    <h5><?php echo $about_fetch["name"];?></h5>
                    <p class="mute"><?php echo $about_fetch["qualification"];?></p>
                    <div class="adjust_about">
                     <h5> Areas of Expertise </h5>
                     <ul>
                     <li><?php echo $about_fetch["area_of_expertise"];?> </li> 
                     </ul>

                    </div>

                </div><!-- end .team-member -->
            </div><!-- end .span3 -->
                <?php
            }
                  ?>
 </div>         
         </div>  
     </div>
                 <div class="row">
            <div class="span12">
                <div class="divider single-dotted"></div>
            </div><!-- end .span12 -->
        </div><!-- end .row -->

这是因为Yadap的简历比其他人短。添加

<br clear="left" />

每4个生物后。

首先,删除

<div class="row">

来自循环。您应该只定义一次,然后在其中附加span3元素。像这样:

<div class="row">
<?php 
    $about = sliding_image();
    while($about_fetch=mysql_fetch_array($about)){ 
?>    
<div class="span3">
</div>
<?php
    }
?>

此外,团队成员类应该有一个固定的高度,就像您现在的代码一样。当其中一个比另一个矮时,你就会遇到现在的麻烦。

您还可以向一行添加4个元素,然后关闭该行并为接下来的四个元素打开一个新行标记。