2014-09-30 123 views
0

我的所有圖像都按順序排列,但在第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 --> 
+0

你周圍有太多'.row' div。你應該重命名每個人的'塊',而不是像'.box',然後讓他們'display:inline-block' – Lee 2014-09-30 13:28:15

回答

0

這是因爲Yadap比別人更短的生物。添加一個

<br clear="left" /> 

之後每第四屆生物。

0

首先,從循環刪除您

<div class="row"> 

。您應該只定義一次,然後在其中添加span3元素。 像這樣:

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

此外,團隊成員類應該有一個固定的高度,你的代碼是現在。當其中一個比另一個短時,你會遇到現在遇到的那種麻煩。

你也可以做的是將4個元素添加到一行中,然後關閉它併爲接下來的四個元素打開一個新的行標記。

+0

我按照你的說法試過,它看起來不正確,但是可以排序幾個問題。你能再看一次嗎?我需要在今天提供它。 – 2014-09-30 15:32:34