老师有个问题请教

# 具体遇到的问题
专家介绍每个专家模块左浮动，但是有一个专家模块出现问题（找不出原因），如图所示，

我尝试过将各模块的宽度和高度变小，但是还是出现这样的问题
# 报错信息的截图
# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

* {
    padding: 0;
    margin: 0;
}

/* 去掉所有ul ol的小圆点 */
ul, ol {
    list-style: none;
}

/* 去掉所有超级链接下划线 */
a {
    text-decoration: none;
}

/* 使用继承性，给body标签设置字体 */
body {
    font: normal 14px/25px '微软雅黑';
}

/* 页面头部上半部分 */
header .header-top {
    width: 1201px;
    margin: 0 auto;
    /* 清除浮动 */
    overflow: hidden;
}

header .header-top .logo {
    padding-top: 39px;
    width: 193px;
    height: 63px;
    /* 左浮动 */
    float: left;
    color: #015E58;
    font-size: 20px;
}

header .header-top .logo h1 {
    width: 193px;
    height: 63px;
}

header .header-top .tool {
    /* 右浮动 */
    float: right;
    width: 266px;
    height: 65px;
    padding: 36px;
}

header .header-top .tool .row1 {
    margin-bottom: 12px;
}

header .header-top .tool .row1 .tel {
    width: 32px;
    height: 26px;
}

header .header-top .tool .row1 .telnumber {
    font-size: 20px;
    color: #00978E;
    display: inline-block;
    width: 158px;
    height: 26px;
    text-align: center;
}

header .header-top .tool .row1 .icon {
    width: 24px;
    height: 24px;
}

header .header-top .tool .row1 .chinese_icon {
    margin-right: 7px;
}

header .header-top .tool .row2 {
    width: 264px;
    height: 28px;
    border: 1px solid rgba(202,202,202,0.60);
    background: #FFFFFF;
}

header .header-top .tool .row2 input {
    float: left;
    width: 224px;
    height: 28px;
    border: none;
    padding-left: 20px;
    outline: none;
}

header .header-top .tool .row2 button {
    float: left;
    border: none;
    width: 20px;
    height: 20px;
    background: none;
    outline: none;
    cursor: pointer;
    /* 相对定位微调位置 */
    position: relative;
    top: 3px;
    right: 3px;
}

/* 导航条样式设计 */
header .main-nav {
    width: 100%;
    height: 60px;
    background-color: #00978E;
    margin: 0 auto;
}

header .main-nav ul {
    height: 60px;
    padding-left: 360px;
}

header .main-nav ul li {
    float: left;
    width: 140px;
    height: 60px;
    font-size: 16px;
    color: #FFFFFF;
    /* 行高设置文字垂直居中 */
    line-height: 60px;
    text-align: center;
}

header .main-nav ul li.current {
    background-color: #015E58;
}

header .main-nav ul li a {
    display: block;
    width: 150px;
    height: 60px;
    font-size: 16px;
    color:white;
}

header .main-nav ul li a:hover {
    background-color: orange;
}

.banner {
    width: 100%;
    position: relative;
}

.banner .banner-img {

    width: 100%;
    display: block;
}

.banner .center {
    width: 1200px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -600px;
}

.banner .center h2 {
    font-size: 60px;
    font-weight: normal;
    color: #015E58;
    /* 绝对定位 */
    position: absolute;
    top: 50%;
    margin-top: -84px;
    margin-left: 148px;
}

.banner .center .left-btn {
    display: inline-block;
    width: 56px;
    height: 64px;
    background-color: rgba(202,202,202,0.60);
    line-height: 64px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -32px;
}

.banner .center .right-btn {
    display: inline-block;
    width: 56px;
    height: 64px;
    background-color: rgba(202,202,202,0.60);
    line-height: 64px;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -32px;
}

.banner ol {
    width: 120px;
    height: 12px;
    /* background-color: red; */
    /* 绝对定位 */
    position: absolute;
    left: 50%;
    margin-left: -60px;
    bottom: 20px;
}

.banner ol li {
    width: 20px;
    height: 12px;
    float: left;
    background-color: white;
    margin-right: 10px;
    /* 设置圆角 */
    border-radius: 10px;
}

.banner ol li:last-child {
    margin-right: 0px;
}

.banner ol li.current {
    width: 30px;
    background-color: orange;
}

/* 内容部分 */
.content {
    padding-top: 71px;
}

.content .useful-links {
    width: 906px;
    height: 151px;
    /* background-color: orange; */
    margin: 0 auto;
}

.content .useful-links ul {
    overflow: hidden;
}

.content .useful-links ul li {
    float: left;
    width: 104px;
    margin-right: 54px;
}

.content .useful-links ul li:last-child {
    margin-right: 0;
}

.content .useful-links ul li span {
    display: block;
    text-align: center;
    color: #333333;
    font-size: 20px;
    line-height: 40px;
}

/* 网页的主要内容  医院动态*/
.content .news-and-notice {
    width: 1200px;
    height: 376px;
    /* background-color: red; */
    margin: 0 auto;
    margin-top: 56px;
}

.content .news-and-notice .news {
    float: left;
    width: 877px;
    height: 376px;
}

.content .news-and-notice .news h3 {
    height: 33px;
    margin-bottom: 10px;
}

/* 图片新闻 */
.content .news-and-notice .news .news-content .hot-news {
    float: left;
    width: 422px;
    height: 328px;
    margin-right: 20px;
    position: relative;
}

.content .news-and-notice .news .news-content .hot-news .info {
    position: absolute;
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,.3);
    left: 0;
    bottom: 0;
    text-align: center;
    color: white;
    line-height: 40px;
}

/* 新闻列表 */
.content .news-and-notice .news .news-content ul {
    float: left;
    width: 400px;
    height: 328px;
}

.content .news-and-notice .news .news-content ul li {
    line-height: 41px;
}

.content .news-and-notice .news .news-content ul li a {
    float: left;
    color: #666666
}

.content .news-and-notice .news .news-content ul li.spec a {
    color: #00978E;
    font-weight: bold;
}

.content .news-and-notice .news .news-content ul li span {
    float: right;
}

/* 新闻公告 */
.content .news-and-notice .notice {
    float: left;
    width: 323px;
    height: 376px;
    /* background-color: green; */
}

/* 医院公告 */
.content .news-and-notice .notice h3 {
    height: 33px;
    margin-bottom: 10px;
}

.content .news-and-notice .notice ol li {
    overflow: hidden;
    margin-bottom: 11px;
}

.content .news-and-notice .notice ol li .number {
    float: left;
    width: 53px;
    height: 57px;
    background-color: #00978E;
    text-align: center;
    line-height: 57px;
    font-size: 30px;
    color: white;
    margin-right: 9px;
}

.content .news-and-notice .notice ol li dl dt a {
    color: #666;
}

.content .news-and-notice .notice ol li dl dd a {
    color: #999;
}

/* 广告图片 */
.content .ad-images {
    width: 1200px;
    margin: 20px auto;
}

/* 科室介绍 */
.content .dep-info {
    width: 100%;
    height: 400px;
}

.content .dep-info .center {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 37px;
    position: relative;
}

.content .dep-info .center .more {
    position: absolute;
    top: 37px;
    right: 0;
    color: #999999;
}

.content .dep-info .center .col {
    width: 270px;
    float: left;
    padding-left: 30px;
}

.content .dep-info .center .col h4 {
    text-align: center;
    margin-bottom: 18px;
    margin-top: 20px;
    position: relative;
}

.content .dep-info .center .col h4::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    top:12px;
    left:67px;
    background-color: #00978E;
}

.content .dep-info .center .col h4::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    top: 12px;
    left: 162px;
    background-color: #00978E;
}

.content .dep-info .center .col ul {
    overflow: hidden;
}

.content .dep-info .center .col li {
    float: left;
    width: 119px;
    height: 34px;
    border: 1px solid #000;
    text-align: center;
    line-height: 34px;
    margin-right: 17px;
    margin-bottom: 16px;
}

.content .dep-info .center .col li:nth-child(2n) {
     margin-right: 0;
}

.content .dep-info .center .col li a {
    color: #333333;
}

.content .dep-info .center .col li.spec a {
    color:#00978E;
    font-weight: bold;
}

.content .exp-info {
    padding-top: 24px;
    width: 1200px;
    margin: 0 auto;
    position: relative;
}

.content .exp-info .more {
    position: absolute;
    top: 37px;
    right: 0;
    color: #999999;
}

.content .exp-info ul {
    overflow: hidden;
}

.content .exp-info ul li {
    float: left;
    width: 400px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张氏医院</title>
    <meta name="Keywords" content="张氏医院是专业的医院，理念就是责任、品质、关爱">
    <meta name="Description" content="美容、减脂、内科、外科">
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    
    <header>
        
        <div class="header-top">
            
            <div class="logo">
                <h1>张氏医院</h1>
            </div>
            
            <div class="tool">
                <div class="row1">
                    <img class="tel" src="images/tel.png" alt="咨询电话" />
                    <span class="telnumber">400-888888888</span>
                    <img class="chinese_icon icon" src="images/chinese_icon.png" alt="切换中文" />
                    <img class="english_icon icon" src="images/english_icon.png" alt="切换英文" />
                </div>
                <div class="row2">
                    <input placeholder="找医生/找科室...">
                    <button><img src="./images/search.png" /></button>
                </div>
            </div>
        </div>
        
        <nav class="main-nav">
            <ul>
                <li class="current"><a href="#">页首</a></li>
                <li><a href="#">医院概况</a></li>
                <li><a href="#">医院动态</a></li>
                <li><a href="#">专家学科</a></li>
                <li><a href="#">服务指南</a></li>
                <li><a href="#">医院文化</a></li>
                <li><a href="#">信息公开</a></li>
                <li><a href="#">互动交流</a></li>
            </ul>
        </nav>
    </header>
    
    <section class="banner">
        <img class="banner-img" src="images/banner.png" />
        <div class="center">
            <h2>责任、科学、严谨</h2>
            <a class="left-btn" href="#"><</a>
            <a class="right-btn" href="#">></a>
        </div>
        
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </section>
    
    <section class="content">
        
        <div class="useful-links">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/icon_jzxz.png" />
                        <span>就诊须知</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/icon_jylc.png" />
                        <span>就医流程</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/icon_zjjs.png" />
                        <span>专家介绍</span></a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/icon_ksjs.png" />
                        <span>科室介绍</span></a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/icon_ybjy.png" />
                        <span>医保就医</span></a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/icon_jktj.png" />
                        <span>健康体检</span>
                    </a>
                </li>
            </ul>
        </div>
        
        <div class="news-and-notice">
            
            <div class="news">
                <h3>医院动态</h3>
                <div class="news-content">
                    
                    <div class="hot-news">
                        
                        <a href="#">
                            <img src="images/news_pic.png" alt="焦点新闻" />
                            <div class="info">
                                “全国首届健康预防与商业医疗保险论坛”在北京医院举办
                            </div>
                        </a>
                    </div>
                    
                    <ul>
                        <li><a href="#">年度医疗机构用血自查评分表和科室基本信息表</a><span>03-22</span></li>
                        <li><a href="#">关于上报北京市医疗机构临床用血信息的通知</a><span>03-23</span></li>
                        <li><a href="#">北京医院输血科通过验收并获批开展“临床基…</a><span>03-24</span></li>
                        <li class="spec"><a href="#">国家药品监督管理局关于修订都梁软胶囊非处…</a><span>03-25</span></li>
                        <li><a href="#">关于将多拉司琼注射剂等药品纳入本市基本医…</a><span>03-26</span></li>
                        <li><a href="#">关于调整完善本市基本医疗保险门诊特殊疾病…</a><span>03-27</span></li>
                        <li><a href="#">广东省药学会：关于印发《超药品说明书用药…</a><span>03-28</span></li>
                        <li><a href="#">人力资源社会保障部关于将36种药品纳入国家…</a><span>03-29</span></li>
                    </ul>
                </div>
            </div>
            
            <div class="notice">
                <h3>医院公告</h3>
                <ol>
                    <li>
                        <div class="number">01</div>
                        <dl>
                            <dt><a href="#">《养生堂》</a></dt>
                            <dd><a href="#">公郭立新主任特殊时期糖尿病人的新冠…</a></dd>
                        </dl>
                    </li>
                    <li>
                        <div class="number">02</div>
                        <dl>
                            <dt><a href="#">《养生堂》</a></dt>
                            <dd><a href="#">王少为主任新型冠状病毒防控指引十八…</a></dd>
                        </dl>
                    </li>
                    <li>
                        <div class="number">03</div>
                        <dl>
                            <dt><a href="#">《我要当医生》</a></dt>
                            <dd><a href="#">谭玲副主任李同舟姚晨蕊药师</a></dd>
                        </dl>
                    </li>
                    <li>
                        <div class="number">04</div>
                        <dl>
                            <dt><a href="#">《全民健康学院》</a></dt>
                            <dd><a href="#">王建业院长 “医”路有你健康同行</a></dd>
                        </dl>
                    </li>
                    <li>
                        <div class="number">05</div>
                        <dl>
                            <dt><a href="#">《健康北京》</a></dt>
                            <dd><a href="#">王建业院长莫把衰老当病治</a></dd>
                        </dl>
                    </li>
                </ol>
            </div>

        </div>
        
        <div class="ad-images">
            <a href="#">
                <img src="images/xuanchuan.png" />
            </a>
        </div>
        
        <div class="dep-info">
            <div class="center">
                <h3>科室介绍</h3>
                <a class="more" href="#"><span>查看更多>></span></a>
                <div class="col">
                    <h4>内科</h4>
                    <ul>
                        <li class="spec"><a href="#">呼吸内科</a></li>
                        <li class="spec"><a href="#">消化内科</a></li>
                        <li><a href="#">神经内科</a></li>
                        <li><a href="#">心血管内科</a></li>
                        <li><a href="#">肾内科</a></li>
                        <li><a href="#">血液内科</a></li>
                        <li><a href="#">免疫科</a></li>
                        <li><a href="#">內分泌科</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h4>肿瘤科</h4>
                    <ul>
                        <li class="spec"><a href="#">肿瘤内科</a></li>
                        <li class="spec"><a href="#">肿瘤外科</a></li>
                        <li><a href="#">肿瘤妇科</a></li>
                        <li><a href="#">骨肿瘤科</a></li>
                        <li><a href="#">放疗科</a></li>
                        <li><a href="#">肿瘤康复科</a></li>
                        <li><a href="#">肿瘤综合科</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h4>外科</h4>
                    <ul>
                        <li class="spec"><a href="#">普通外科</a></li>
                        <li class="spec"><a href="#">神经外科</a></li>
                        <li><a href="#">心胸外科</a></li>
                        <li><a href="#">泌尿外科</a></li>
                        <li><a href="#">肝胆外科</a></li>
                        <li><a href="#">肛肠外科</a></li>
                        <li><a href="#">心血管外科</a></li>
                        <li><a href="#">烧伤科</a></li>
                        <li><a href="#">骨外科</a></li>
                        <li><a href="#">乳腺外科</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h4>儿科</h4>
                    <ul>
                        <li class="spec"><a href="#">儿科综合</a></li>
                        <li class="spec" ><a href="#">小儿内科</a></li>
                        <li><a href="#">小儿外科</a></li>
                        <li><a href="#">新生儿科</a></li>
                        <li><a href="#">儿童营养科</a></li>
                        <li><a href="#">消化内科</a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="exp-info">
            <h3>专家介绍</h3>
            <a class="more" href="#"><span>查看更多</span></a>
            <ul>
                <li>
                    <div class="picbox">
                        <a href="#">
                            <img src="images/Mask group1.png" />
                        </a>
                    </div>
                    <div class="wordsbox">
                        <p>姓名：李琳</p>
                        <p>科室：肿瘤内科</p>
                        <p>职称：主任医师</p>
                        <p>介绍：北京医院肿瘤内科科室主任，党支部书记，副教授，硕士研究生导师，中国老年肿瘤专业委员会肺癌分委会常务委员，北京医学……</p>
                    </div>
                </li>
                <li>
                    <div class="picbox">
                        <a href="#">
                            <img src="images/Mask group2.png" />
                        </a>
                    </div>
                    <div class="wordsbox">
                        <p>姓名：毛永辉</p>
                        <p>科室：肾脏内科</p>
                        <p>职称：主任医师</p>
                        <p>介绍：北京医院肾内科主任，主任医师，硕士研究生导师。1989年毕业于华西医科大学临床医学院，后在北京医院内科、肾内科工作……</p>
                    </div>
                </li>
                <li>
                    <div class="picbox">
                        <a href="#">
                            <img src="images/Mask group3.png" />
                        </a>
                    </div>
                    <div class="wordsbox">
                        <p>姓名：黄慈波</p>
                        <p>科室：风湿免疫科</p>
                        <p>职称：主任医师</p>
                        <p>介绍：教授主任医师研究生导师卫生部北京医院风湿免疫科主任，北京大学医学部风湿免疫系副主任；海峡两岸医师交流协会风湿免疫……</p>
                    </div>
                </li>

                <li>
                    <div class="picbox">
                        <a href="#">
                            <img src="images/Mask group4.png" />
                        </a>
                    </div>
                    <div class="wordsbox">
                        <p>姓名：曹素艳</p>
                        <p>科室：特需医疗部</p>
                        <p>职称：主任医师</p>
                        <p>介绍：北京医院特需医疗部（健康管理中心）/全科医疗部主任，老年与全科医学中心副主任，主任医师，医学硕士。北京大学医学部硕士……</p>
                    </div>
                </li>
                <li>
                    <div class="picbox">
                        <a href="#">
                            <img src="images/Mask group5.png" />
                        </a>
                    </div>
                    <div class="wordsbox">
                        <p>姓名：陈海波</p>
                        <p>科室：神经内科</p>
                        <p>职称：主任医师</p>
                        <p>介绍：北京医院神经内科主任，主任医师，北京大学医学部神经病学系副主任、教授。中国医师协会神经内科医师分会副会长兼帕金……</p>
                    </div>
                </li>
                <li>
                    <div class="picbox">
                        <a href="#">
                            <img src="images/Mask group6.png" />
                        </a>
                    </div>
                    <div class="wordsbox">
                        <p>姓名：Jack</p>
                        <p>科室：普通外科</p>
                        <p>职称：主任医师</p>
                        <p>介绍：北京医院普通外科主任，胃肠外科主任，北京大学医学部硕士研究生导师，1985年毕业于白求恩医科大学，从事普外科临床工……</p>
                    </div>
                </li>
            </ul>
        </div>
    </section>

    
    <footer>
        
        <div class="friend-links">
            <h3>友情链接</h3>
            <ul>
                <li><a href="#">院长信箱</a></li>
                <li><a href="#">投诉信箱</a></li>
                <li><a href="#">在线调查</a></li>
                <li><a href="#">地理位置</a></li>
                <li><a href="#">网站地图</a></li>
                <li><a href="#">网站帮助</a></li>
                <li><a href="#">隐私声明</a></li>
            </ul>
        </div>
        
        <address>
            <h3>张氏小医生</h3>
            <ul>
                <li>地址：北理工国防大厦111号</li>
                <li>电话：088-88888888</li>
                <li>邮箱：kefu@imooc.com</li>
                <li>邮编：666666</li>
                <li>网址：<a href="http://www.imooc.com">http://imooc.com</a></li>
                <li>举报热线：088-88888888</li>
            </ul>
        </address>
    </footer>
</body>

</html>

ZcKing 2020-12-16

源自：浮动与定位 4-13 小慕医生项目开发（8）

收起

1回答

好帮手慕慕子 2020-12-16 16:15:25

同学你好，老师测试同学的代码是没有问题，可能是图片的问题，视频中老师也有提到，图片有多余的透明背景，导致图片的实际大小增加了，所以布局效果可能会不对。同学可以继续跟着视频往后学习，后面会针对图片与文字设置样式，实现并排布局。祝学习愉快~

收起回答

提问者 ZcKing #1

如果是图片的问题，那我把图片估计设计为50px和50px还是出现此问题，所以我觉得不是图片的原因可能性不大

2020-12-16 16:26:17
提问者 ZcKing #2

老师抱歉我刚没注意，我把图片设置小了，是可以实现的。的确是您说的那种情况；

2020-12-16 16:30:46