当页面缺少元素时，CSS的定位问题 - Positioning issues with CSS when pages have elements missing

Positioning issues with CSS when pages have elements missing

本文关键字：CSS 定位问题元素 | 更新日期: 2023-09-27

我的网站有一个特定的部分，由于糟糕的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>

您应该显式地处理异常情况。

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