Question

我的所有图像都按顺序放置，但在第3行中，我的图像没有像上面的图像那样对齐。我无法弄清楚问题是什么。实际上它工作正常，直到管理员上传了一个空白字段的图像图像，但这已经整理出来，当图像上传时，问题开始上升。这是我的问题的链接。

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 -->

Answer 1

这是因为Yadap的生物比其他生物更短。添加

<br clear="left" />

每4次生物后

。

Answer 2

首先，删除你的

<div class="row">

循环中的

。您应该只定义一次，然后在其中附加span3元素。像这样：

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

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

你还可以做的是在一行中添加4个元素，然后关闭它并为接下来的四个元素打开一个新的行标记。

图像未按预期对齐

2 个答案: