當頁面有元素丟失時用CSS定位問題

Question

我的網站有一個特定的部分，由於壞的CSS & PHP代碼，我今天決定修復它。祝好運修復了很多（並且一路上學了CSS）。

我修正的頁面上有動態內容 - 像我們在這裏的徽章是在stackoverflow上。根據用戶級別，有些人可能沒有任何徽章。

問題是，雖然帶有徽章的頁面看起來沒什麼問題，但看起來沒有完全打破的頁面，而當沒有徽章時，頁面上的其他內容會轉移。

有關我應該如何解決它的任何想法？

CSS：

.ms-sellerprofile { 
    width: 100%; 
    align:center; 
} 

.ms-sellerprofile .seller-data { 
    width: 100%; 
    display: inline-block; 
    align:center; 
} 

.ms-sellerprofile .seller-data > div { 
    display: inline; 
    float: left; 
} 


.ms-sellerprofile .seller-data .avatar-box-img { 
    float:left; 
    width:250px; 
    display: inline-block; 
    margin-top:10px; 
    margin-bottom:10px; 

} 

.ms-sellerprofile .seller-data div.avatar-box { 
    margin-left: 10px; 
    width:250px; 
    text-align: left; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 22px; 
    display: inline-block; 
    margin-top:10px; 
    margin-bottom:10px; 

} 

.ms-sellerprofile .seller-data .info-box { 
    margin-top: 10px; 
    margin-left: 290px; 
    text-align: right; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 14px; 
} 

.ms-sellerprofile .seller-data div.ms-badges { 
    border: 0; 
    margin-left: -240px; 
    margin-top: 40px; 
} 

.ms-sellerprofile .seller-data div.info-box p { 
    margin: 5px 0; 
} 

.ms-sellerprofile .seller-data div.info-box a { 
    color: #38B0E3; 
    text-decoration: underline; 
} 

.ms-sellerprofile .seller-description { 
    clear: both; 
    margin: 40px 0; 
} 

PHP：

<div class="ms-sellerprofile"> 
    <div class="seller-data"> 
      <div class="avatar-box-img"><a href="<?php echo $seller['href']; ?>"><img src="<?php echo $seller['thumb']; ?>" /></a> 
      </div> 
      <div class="avatar-box"><a href="<?php echo $seller['href']; ?>"><?php echo $ms_catalog_seller_products; ?></a> 
      </div> 
      <div class="ms-badges"><?php foreach($seller['badges'] as $badge) { ?> 
       <img src="<?php echo $badge['image']; ?>" title="<?php echo $badge['description']; ?>" /></div> 
      <?php } ?> 


     <div class="info-box"> 
      <?php if ($seller['country']) { ?> 
       <p><b><?php echo $ms_catalog_seller_profile_country; ?></b> <?php echo $seller['country']; ?></p> 
      <?php } ?> 

      <?php if ($seller['company']) { ?> 
       <p><b><?php echo $ms_catalog_seller_profile_company; ?></b> <?php echo $seller['company']; ?></p> 
      <?php } ?> 

      <?php if ($seller['website']) { ?> 
       <p><b><?php echo $ms_catalog_seller_profile_website; ?></b> <?php echo $seller['website']; ?></p> 
      <?php } ?> 

      <!-- <p><b><?php echo $ms_catalog_seller_profile_totalsales; ?></b> <?php echo $seller['total_sales']; ?></p> --> 
      <p><b><?php echo $ms_catalog_seller_profile_totalproducts; ?></b> <?php echo $seller['total_products']; ?></p> 
     </div> 
    </div> 
</div> 

Answer 1

你應該處理異常情況作了明確規定。

if($var==NULL){ 
    //html without using $var 
} 
else{ 
    //html with use of $var 
}