老师，为什么我的页面在缩放网页页面时医院和地图的图片出现错位？

来源：5-12 项目作业

慕叶nova

2019-09-19 10:47:59

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>城市统一挂号平台</title>
    <link rel="stylesheet" href="CSS/layout.css">
    <link rel="stylesheet" href="CSS/base.css">
    <link rel="stylesheet" href="CSS/ui.css">
    <script type="text/javascript" src="JS/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="profile">
        <div class="profile-top">
            <div class="profile-top-left">
                北京协和医院&nbsp;&nbsp;&nbsp;&nbsp;<span>关注医院</span>
            </div>    
            <div class="profile-top-right">
                <p><span>等级：</span>三级甲等&nbsp;&nbsp;&nbsp;&nbsp;<span>区域：</span>东城区<span>&nbsp;&nbsp;&nbsp;&nbsp;分类：</span>中国医科院校所属医院</p>
            </div> 
        </div>
        <div class="profile-bottom">
            <img src="img/hospital-1.jpg" class="hospital" />
            <div class="profile-massage">
                <div class="massage-item">
                    <div class="icon address"></div>
                    <span>[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓胡同41号</span>
                </div>
                <div class="massage-item">
                    <div class="icon website"></div>
                    <span>http://www.pumch.cn/</span>
                </div>
                <div class="massage-item phone">
                    <div class="icon"></div>
                    <span>东院咨询台:010-69155564;西院咨询台:010-69158010</span>
                </div>
                <div class="massage-item-bottom">
                    <div class="icon icon-bottom"></div>
                    <span>东院：106，108，110，111，116，684，685到东单路口北；41，104快，814到东单路南；1，52，728，        802到东单路口西；20，25，37，39到东单路口东；<br/>
                          103，104，420，803到新东安市场；地铁1、5号线到东单。西院：68到辟才胡同东口；更多乘车路线详见须知
                    </span>
                </div>
            </div>
            <img src="img/map-1.png" class="baidumap" />
        </div>
    </div>
    </body>
</html>

/* 医院简介 */
.profile-top{
    width: 950px;
    height: 48px;
    margin: 0 auto;
}
.profile-top-left{
    float: left;
    line-height: 48px;
}
.profile-top-left span{
    font-size: 13px;
    color:#f6a633;
    font-weight: bold;
}
.profile-top-right{
    float: right;
    line-height: 48px;
    font-size: 13px;
    font-weight: bold;
}
.profile-top-right span{
    color: #00f;
}

.profile-bottom{
    width: 950px;
    height: 211px;
    margin: 0 auto;
    border-top: 1px solid #e2e2e2;
}

.hospital{
    width:190px;
    height: 150px;
    float: left;
    margin: 10px 20px 0 0;
    
}
.profile-massage{
    width: 480px;
    float: left;
    margin: 10px 20px 0 0;
    font-size: 13px;
    color: #919191;
}
.profile-massage .massage-item{
    width: 480px;
    height: 30px;
    line-height: 30px;
}
.profile-massage .massage-item-bottom{
    width: 480px;
    height: 100px;
    line-height: 20px;
}
.profile-massage .icon{
    float: left;
    width: 16px;
    height: 16px;
    margin: 7px;
}
.address{
    background: url(../img/icon-web.png)  0 0 no-repeat;
}
.website{
    background: url(../img/icon-web.png)  0 -22px no-repeat;
}
.phone{
    background: url(../img/icon-tel.png)  7px 13px no-repeat;
}
.profile-massage .icon-bottom{
    margin-bottom: 80px;
    background: url(../img/icon-web.png)  0 -64px no-repeat;
}
.baidumap{
    width: 240px;
    height: 150px;
    float: left;
    margin: 10px 0 0 0;
}