老师,我这个浮动有问题?浮动不上去

老师,我这个浮动有问题?浮动不上去

http://img1.sycdn.imooc.com//climg/601e6954098c3ec615541204.jpg

相关代码:

  <!-- 专家介绍 -->
<div class="exp-info">
<h3>专家介绍</h3>
<a href="" class="more">查看更多&gt;&gt;<相关代码:/a>
<ul>
<li>
<div class="picbox">
<a href="">
<img src="http://127.0.0.1:5500/images/Mask group1.png" alt="">
</a>
</div>
<div class="wordbox">
<p>姓名:李琳</p>
<p>科室:肿瘤内科</p>
<p>职称:主任医师</p>
<p>介绍:北京医院肿瘤内科科室主任,党支部书记,副教授,硕士研究生导师,中国老年肿瘤专业委员会肺癌分委会常务委员,北京医学……</p>
</div>
</li>
<li>
<div class="picbox">
<a href="">
<img src="http://127.0.0.1:5500/images/Mask group2.png" alt="">
</a>
</div>
<div class="wordbox">
<p>姓名:毛永辉</p>
<p>科室:肾脏内科</p>
<p>职称:主任医师</p>
<p>介绍:北京医院肾内科主任,主任医师,硕士研究生导师。1989年毕业于华西医科大学临床医学院,后在北京医院内科、肾内科工作……</p>
</div>
</li>
<li>
<div class="picbox">
<a href="">
<img src="http://127.0.0.1:5500/images/Mask group3.png" alt="">
</a>
</div>
<div class="wordbox">
<p>姓名:黄慈波</p>
<p>科室:风湿免疫科</p>
<p>职称:主任医师</p>
<p>介绍:教授主任医师研究生导师卫生部北京医院风湿免疫科主任,北京大学医学部风湿免疫系副主任;海峡两岸医师交流协会风湿免疫……</p>
</div>
</li>
<li>
<div class="picbox">
<a href="">
<img src="http://127.0.0.1:5500/images/Mask group4.png" alt="">
</a>
</div>
<div class="wordbox">
<p>姓名:曹素艳</p>
<p>科室:特需医疗部</p>
<p>职称:主任医师</p>
<p>介绍:北京医院特需医疗部(健康管理中心)/全科医疗部主任,老年与全科医学中心副主任,主任医师,医学硕士。北京大学医学部硕士……</p>
</div>
</li>
<li>
<div class="picbox">
<a href="">
<img src="http://127.0.0.1:5500/images/Mask group5.png" alt="">
</a>
</div>
<div class="wordbox">
<p>姓名:陈海波</p>
<p>科室:神经内科</p>
<p>职称:主任医师</p>
<p>介绍:北京医院神经内科主任,主任医师,北京大学医学部神经病学系副主任、教授。中国医师协会神经内科医师分会副会长兼帕金……</p>
</div>
</li>
<li>
<div class="picbox">
<a href="">
<img src="http://127.0.0.1:5500/images/Mask group6.png" alt="">
</a>
</div>
<div class="wordbox">
<p>姓名:Jack</p>
<p>科室:普通外科</p>
<p>职称:主任医师</p>
<p>介绍:北京医院普通外科主任,胃肠外科主任,北京大学医学部硕士研究生导师,1985年毕业于白求恩医科大学,从事普外科临床工……</p>
</div>
</li>
</ul>
</div>


.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;
}


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2021-02-06 18:35:22

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

另外,代码中有一个细节需要注意下,如下图所示位置的文字写在了闭合标签中,不符合代码规范,建议调整下,让代码更加规范

http://img1.sycdn.imooc.com//climg/601e70e4097a640008170108.jpg

如果还有问题,可以将你写的完整代码全部粘贴多来,便于帮助同学准确的定位与解决问题。

祝学习愉快~

  • 提问者 阿山123 #1

    这个图片应该是老师已经裁剪过得,等下我把所有代码和css发给你,老师帮看下

    2021-02-06 18:38:54
  • 好帮手慕慕子 回复 提问者 阿山123 #2

    同学你好,在你的最新提问下已经做出了解答,快去查看下吧,http://class.imooc.com/course/qadetail/276662 祝学习愉快~

    2021-02-06 19:02:06
  • 好帮手慕慕子 回复 提问者 阿山123 #3

    同学你好,图片问题老师已经修改了,同学可以重新下载源码查看下哦,祝学习愉快~

    2021-02-07 11:40:41
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师