老师。我这个浮动有问题？

相关代码：

*{
    margin: 0;
    padding: 0;
}
/* 去掉小圆点 */
ol,ul{
    list-style: none;
}
/* 去掉下划线 */
a{
    text-decoration: none;
}
/* 使用继承性 设置body字体 */
body{
    font: normal 14px/25px '微软雅黑';
}
/* 头部 */
header{

}
header .header-top{
    width: 1200px;
    /* background-color: aquamarine; */
    margin: 0 auto;
    overflow: hidden;

}
header .header-top .logo{
    width: 192px;
    height: 63px;
    padding-top:39px ;
    float: left;

}
header .header-top .logo h1{
    width: 192px;
    height: 63px;
    color:gray;
    /* background-color: blueviolet; */
}
header .header-top .gn{
    width: 291px;
    height: 70px;
    /* background-color: burlywood; */
    float: right;
    padding-top: 36px;
}
header .header-top .gn .tool .tel{
    width: 32px;
    height: 25px;
    margin-right: 25px;
    position: relative;
    top:5px;
}
header .header-top .gn .tool .tel-number{
    display: inline-block;
    width: 158px;
    height: 26px;
    font-size: 20px;
    color: #00978E;
}
header .header-top .gn .tool .icon{
    width: 24px;
    height: 24px;
}
header .header-top .gn .tool .chinese_icon{

    margin-right: 14px;
    position: relative;
    top:4px;

}
header .header-top .gn .tool .english_icon{
    position: relative;
    top:4px;
}
header .header-top .gn .sousuo{
    width: 289px;
    height: 28px;
    border: 1px solid #99999941;
    margin-top: 8px;
    border-radius: 3%;
}
header .header-top .gn .sousuo input{
    /* 变为浮动好控制 */
    float: left;
    width: 240px;
    height: 28px;
    /* 去掉边框线 */
    border: none;
    padding-left: 20px;
    /* 去掉鼠标点击时候的蓝色框 */
    outline: none;


}
header .header-top .gn .sousuo button{
    float: left;
    width: 25px;
    height: 25px;
    background: none;
    border: none;
    outline: none;
    /* 触碰时为小手 */
    cursor: pointer;
    position: relative;
    top: 3px;
    right: -4px;

}

/* 导航条 */
header .main-nav{
    /* 不用写宽度 自动撑满*/
    height: 60px;
    background-color: cadetblue;
    margin-top: 33px;
}
header .main-nav ul{
    width: 1200px;
    height: 60px;
    margin: 0 auto;
    /* background-color: chartreuse; */

}
header .main-nav ul li{
    float: left;
    width: 150px;
    height: 60px;
    text-align: center;
    line-height: 60px;


}
header .main-nav ul li.bc{
    background-color: darkgreen;
}
header .main-nav ul li a{
    display: block;
    width: 150px;
    height: 60px;
    color: cornsilk;
    font-size: 16px;
}
header .main-nav ul li a:hover{
    background-color: darkorange;
}
/* banner */
.banner{
    position:relative;

}
.banner .banner-img{
    width: 100%;
}
/* 做出一个版心 版心随着父亲的视图固定，，防止用户的屏幕过大过小而出现偏差 */
.banner .center{
    position: absolute;
    width: 1200px;
    height: 300px;
    /* background-color: green; */
    top: 50%;
    margin-top: -150px;
    left: 50%;
    margin-left: -600px;
}
.banner .center .left-btn{
    width: 56px;
    height: 74px;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 50%;
    margin-top: -37px;
    left: 0px;
}
.banner .center .right-btn{
    width: 56px;
    height: 74px;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 50%;
    margin-top: -37px;
    right: 0px;
}
.banner .center h2{
    height: 79px;
    width: 480px;
    /* background-color: royalblue; */
    position: absolute;
    top: 50%;
    text-align: center;
    line-height: 79px;
    font-family: Helvetica;
font-size: 60px;
color: #015E58;
font-weight: normal;
margin-top: -100px;
left: 114px;
}
/* ol是绝对定位的 li是浮动的 */
.banner ol{
    position: absolute;
    width: 120px;
    height: 12px;
    /* background-color: royalblue; */
    left: 50%;
    margin-left: -60px;
    bottom: 20px;
}
.banner ol li{
    float: left;
    width: 20px;
    height: 12px;
    margin-right: 10px;
    border-radius: 25%;
    background-color: seashell;
}
/* 最后一个没有margin */
.banner ol li:last-child{
    margin-right: 0;
}
.banner ol li.cur{
    width: 30px;
    background-color: steelblue;
}

/* content */
.content{
    padding-top: 71px;
}
.content .userful-links{
    width: 904px;
    height: 151px;
    margin: 0 auto;
    /* background-color: teal; */
}
.content .userful-links ul{
    /* 清除浮动 */
    overflow: hidden;
}
.content .userful-links ul li{
    float: left;
    width: 104px;
    margin-right: 56px;

}
.content .userful-links ul li span{
    /* 转块 不设置宽度，就相当于width属性为100%了，此时可以文字text-align:center */
    display: block;
    text-align: center;
    color: #333;
    font-size: 20px;
    line-height: 40px;
}
.content .userful-links ul li:last-child{
    margin-right: 0px;
}

.content .news-notice{
    width: 1200px;
    height: 376px;
    /* background-color: tomato; */
    margin: 0 auto;
    margin-top: 56px;
}
.content .news-notice .news{
    width: 878px;
    height: 376px;
    /* background-color: turquoise; */
    float: left;
}
.content .news-notice .notice{
    height: 376px;
    width: 322px;
    /* background-color: violet; */
    float: left;
}
.content .news-notice .news h3{
    height: 21px;
    margin-bottom: 27px;
}
.content .news-notice .news .news-content .hot-news{
    width: 422px;
    height: 328px;
    float: left;
    margin-right: 15px;
    position: relative;
}
.content .news-notice .news .news-content .hot-news .info{
    position: absolute;
    width: 422px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 40px;
    color: seashell;

}
.content .news-notice .news .news-content .news-list ul{
    float: left;
    width: 400px;
    height: 328px;

}
.content .news-notice .news .news-content .news-list ul li{
    line-height: 42px;
}
.content .news-notice .news .news-content .news-list ul li a{
    float: left;
    color: #000000;
}
.content .news-notice .news .news-content .news-list ul li span{
    float: right;
}
.content .news-notice .news .news-content .news-list ul li a.spec{
    color: teal;
}
.content .news-notice .notice h3{
    height: 21px;
    margin-bottom: 27px;
}
.content .news-notice .notice ol li{
    overflow: hidden;
    margin-bottom: 14px;
}
.content .news-notice .notice ol li .num{
    float: left;
    height: 53px;
    width: 57px;
    background-color: slategray;
    font-size: 30px;
    text-align: center;
    line-height: 53px;
    margin-right: 10px;
}
.content .news-notice .notice ol li dl dt a{
    color: #666;
}
.content .news-notice .notice ol li dl dd a{
    color: #999;
}
.content .ad-images{
    width: 1200px;
    height: 168px;
    margin: 20px auto;
}
.content .dep-info{
    width: 100%;
    height: 437px;
    background-color: #FAFAFA;;
}
.content .dep-info .dep-content{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    /* background-color: greenyellow; */
    padding-top: 37px;
    position: relative;
}
.content .dep-info .dep-content .more{
    position: absolute;
    right: 0;
    top: 37px;
    color:#999999;
}
.content .dep-info .dep-content .col{
    float: left;
    width: 270px;
    padding-left: 30px;
}
.content .dep-info .dep-content .col h4{
    text-align: center;
    margin-bottom: 18px;
    margin-top: 10px;
    position: relative;
}
.content .dep-info .dep-content .col h4::before{
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    background-color: #00978E;
    left: 65px;
    bottom: 10px;

}
.content .dep-info .dep-content .col h4::after{
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    background-color: #00978E;
    right: 65px;
    bottom: 10px;

}
.content .dep-info .dep-content .col li{
    float: left;
    width: 119px;
    height: 34px;
    border: 1px solid rgba(0, 0, 0, 0.295);
    text-align: center;
    line-height: 34px;
    margin-right: 21px;
    margin-bottom: 25px;
}
.content .dep-info .dep-content .col li:nth-child(2n){
    margin-right: 0;
}
.content .dep-info .dep-content .col li a{
    color: #333;
}
.content .dep-info .dep-content .col .spec a{
    color: greenyellow;
}
.content .exp-info{
    width: 1200px;
    /* background-color: #015E58; */
    margin: 0 auto;
    padding-top: 24px;
    position: relative;

}
.content .exp-info .more{
    position: absolute;
    right: 0;
    top: 37px;
    color:#999999;
}
.content .exp-info ul li{
    float: left;
    width: 400px;
}
.content .exp-info ul{
    overflow: hidden;
}

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</div>

</div>

<ul>

</ul>

</nav>

</header>

</div>

<ol>

</ol>

</section>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

'全国首届健康预防与商业医疗保险论坛”在北京医院举办'

</div>

</a>

</div>

<ul>

<li><a href="">年度医疗机构用血自查评分表和科室基本信息表</a><span>03-30</span></li>

<li><a href="">关于上报北京市医疗机构临床用血信息的通知</a><span>03-30</span></li>

<li><a href="">北京医院输血科通过验收并获批开展“临床基…</a><span>03-30</span></li>

<li><a href="" class="spec">国家药品监督管理局关于修订都梁软胶囊非处…</a><span>03-30</span></li>

<li><a href="">关于将多拉司琼注射剂等药品纳入本市基本医…</a><span>03-30</span></li>

<li><a href="">关于调整完善本市基本医疗保险门诊特殊疾病…</a><span>03-30</span></li>

<li><a href="">广东省药学会：关于印发《超药品说明书用药…</a><span>03-30</span></li>

<li><a href="">人力资源社会保障部关于将36种药品纳入国家</a><span>03-30</span></li>

</ul>

</div>

<ol>

<li>

<dl>

<dd><a href="">公郭立新主任特殊时期糖尿病人的新冠…</a></dd>

</dl>

</li>

<li>

<dl>

<dd><a href="">王少为主任新型冠状病毒防控指引十八…</a></dd>

</dl>

</li>

<li>

<dl>

<dt><a href="">《我要当医生》</a></dt>

<dd><a href="">谭玲副主任李同舟姚晨蕊药师</a></dd>

</dl>

</li>

<li>

<dl>

<dt><a href="">《全民健康学院》</a></dt>

<dd><a href="#">王建业院长 “医”路有你健康同行</a></dd>

</dl>

</li>

<li>

<dl>

<dd><a href="">王建业院长莫把衰老当病治</a></dd>

</dl>

</li>

</ol>

</div>

</a>

</aside>

<ul>

<li><a href="">心血管内科</a></li>

</ul>

</div>

<ul>

<li><a href="">肿瘤康复科</a></li>

<li><a href="">肿瘤综合科</a></li>

</ul>

</div>

<ul>

<li><a href="">心血管外科</a></li>

</ul>

</div>

<ul>

<li><a href="">儿科综合科</a></li>

<li><a href="">儿童营养科</a></li>

</ul>

</div>

<ul>

<li>

</a>

</div>

<p>介绍：北京医院肿瘤内科科室主任，党支部书记，副教授，硕士研究生导师，中国老年肿瘤专业委员会肺癌分委会常务委员，北京医学……</p>

</div>

</li>

<li>

</a>

</div>

<p>介绍：北京医院肾内科主任，主任医师，硕士研究生导师。1989年毕业于华西医科大学临床医学院，后在北京医院内科、肾内科工作……</p>

</div>

</li>

<li>

</a>

</div>

<p>科室：风湿免疫科</p>

<p>介绍：教授主任医师研究生导师卫生部北京医院风湿免疫科主任，北京大学医学部风湿免疫系副主任；海峡两岸医师交流协会风湿免疫……</p>

</div>

</li>

<li>

</a>

</div>

<p>科室：特需医疗部</p>

<p>介绍：北京医院特需医疗部（健康管理中心）/全科医疗部主任，老年与全科医学中心副主任，主任医师，医学硕士。北京大学医学部硕士……</p>

</div>

</li>

<li>

</a>

</div>

<p>介绍：北京医院神经内科主任，主任医师，北京大学医学部神经病学系副主任、教授。中国医师协会神经内科医师分会副会长兼帕金……</p>

</div>

</li>

<li>

</a>

</div>

<p>介绍：北京医院普通外科主任，胃肠外科主任，北京大学医学部硕士研究生导师，1985年毕业于白求恩医科大学，从事普外科临床工……</p>

</div>

</li>

</ul>

</div>

</section>

<ul>

</ul>

</div>

<ul>

<li>地址：北理工国防大厦111号</li>

<li>邮箱：kefu@imooc.com</li>

<li><a href="">网址：http://imooc.com</a></li>

</ul>

</div>

</footer>

</body>

</html>

阿山123 2021-02-06

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

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2021-02-06 19:01:17

同学你好，确实是因为图片大小的问题，可以给图片设置一个固定的宽高，示例：

这样就可以浮动在一排显示了，示例：

源码中提供的图片有多余的透明背景，暂时还没有处理，同学可以先参考老师给出的方法解决问题后，继续往后学习，我们会尽快处理图片并重新上传的，完成之后会通知同学的

祝学习愉快~

收起回答

相似问题

请教浮动问题

元素浮动后的属性问题

几个问题请老师解答

3分42秒老师说clear相当于没有给元素加浮动，这个和助教你们说的有出入

老师，这个浮动我有点不理解。

登录后可查看更多问答，登录/注册

前端工程师2020

参与学习人
提交作业 7882 份
解答问题 15276 个

前端技术快速更迭，人才紧缺。带你从0基础开始，成为Web全栈工程师，转行就业更顺畅。

了解课程

本课精华内容

问答作业

老师，我在xhr.send()出错了

93 2

老师好，这里虽然老师给了方法，但我想问问关于定位后的宽高

44 2

函数里面的参数是函数,那么里面作为参数的函数是如何调用的?

74 4

老师请检查

30 1

老师，关于ctx.set()我存在困惑

32 1

查看更多本课问答

请稍等 ...

老师。我这个浮动有问题？

老师。我这个浮动有问题？

正在回答

请选择置顶位置