麻烦老师看下代码是否正确 是否可以这样写 有没有需要改进的地方 谢谢
来源：3-9 项目作业
夜的解忧铺
2021-06-08 01:01:47
还有指导下最后一位医生的位置要怎么进行调整
<style>
.picbox{
width: 400px;
float: left;
}
.wordbox{
width: 150px;
float: left;
}
.wordbox p:last-child{
margin-right: 0;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.picbox{
width: 400px;
float: left;
}
.wordbox{
width: 150px;
float: left;
}
.wordbox p:last-child{
margin-right: 0;
}
</style>
</head>
<body>
<section class="content">
<!-- 专家介绍 -->
<div class="exp-ifo">
<h3>专家介绍</h3>
<a href="">查看更多</a>
<!-- <ul>
<li>
<div class="picbox">
<a href=""><img src="images/lilin.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="images/maoxiaohui.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="images/huangcibo.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="images/caosuyan.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="images/chenhaibo.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="images/jack.png" alt=""></a>
</div>
<div class="wordbox">
<p>姓名：Jack</p>
<p>科室：普通外科</p>
<p>职称：主任医师</p>
<p>介绍：北京医院普通外科主任，胃肠外科主任，北京大学医学部硕士研究生导师，1985年毕业于白求恩医科大学，从事普外科临床工……</p>
</div>
</li>
</ul> -->
<div class="exp">
<div class="picbox">
<dl>
<dt><a href=""><img src="images/lilin.png" alt=""></a></dt>
<dd>
<div class="wordbox">
<p>姓名：李琳</p>
<p>科室：肿瘤内科</p>
<p>职称：主任医师</p>
<p>介绍：北京医院肿瘤内科科室主任，党支部书记，副教授，硕士研究生导师，中国老年肿瘤专业委员会肺癌分委会常务委员，北京医学……</p>
</div>
</dd>
</dl>
</div>
<div class="picbox">
<dl>
<dt><a href=""><img src="images/maoxiaohui.png" alt=""></a></dt>
<dd>
<div class="wordbox">
<p>姓名：姓名：毛永辉</p>
<p>科室：肾脏内科</p>
<p>职称：主任医师</p>
<p>介绍：北京医院肾内科主任，主任医师，硕士研究生导师。1989年毕业于华西医科大学临床医学院，后在北京医院内科、肾内科工作……</p>
</div>
</dd>
</dl>
</div>
<div class="picbox">
<dl>
<dt><a href=""><img src="images/huangcibo.png" alt=""></a></dt>
<dd>
<div class="wordbox">
<p>姓名：黄慈波</p>
<p>科室：风湿免疫科</p>
<p>职称：主任医师</p>
<p>介绍：教授主任医师研究生导师卫生部北京医院风湿免疫科主任，北京大学医学部风湿免疫系副主任；海峡两岸医师交流协会风湿免疫……</p>
</div>
</dd>
</dl>
</div>
<div class="picbox">
<dl>
<dt><a href=""><img src="images/caosuyan.png" alt=""></a></dt>
<dd>
<div class="wordbox">
<p>姓名：曹素艳</p>
<p>科室：特需医疗部</p>
<p>职称：主任医师</p>
<p>介绍：北京医院特需医疗部（健康管理中心）/全科医疗部主任，老年与全科医学中心副主任，主任医师，医学硕士。北京大学医学部硕士……</p>
</div>
</dd>
</dl>
</div>
<div class="picbox">
<dl>
<dt><a href=""><img src="images/chenhaibo.png" alt=""></a></dt>
<dd>
<div class="wordbox">
<p>姓名：陈海波</p>
<p>科室：神经内科</p>
<p>职称：主任医师</p>
<p>介绍：北京医院神经内科主任，主任医师，北京大学医学部神经病学系副主任、教授。中国医师协会神经内科医师分会副会长兼帕金……</p>
</div>
</dd>
</dl>
</div>
<div class="picbox">
<dl>
<dt><a href=""><img src="images/jack.png" alt=""></a></dt>
<dd>
<div class="wordbox">
<p>姓名：Jack</p>
<p>科室：普通外科</p>
<p>职称：主任医师</p>
<p>介绍：北京医院普通外科主任，胃肠外科主任，北京大学医学部硕士研究生导师，1985年毕业于白求恩医科大学，从事普外科临床工……</p>
</div>
</dd>
</dl>
</div>
</div>
</div>
</section>
</body>
</html>
1回答
-
好帮手慕言
2021-06-08
同学你好，如下：
1、专家介绍区域这样写是可以的。
2、最后两位医生信息没有靠左显示，是因为第一个医生信息的高度太大了，第二个医生的高度小一些，所以就在第二个医生信息下方显示了
建议：可以把高度设置成一样的，如下：
如果想让一行显示三个，可以给外层元素设置宽度，宽度值设置为3个医生信息的总宽度，如下：
祝学习愉快~
0
相似问题