有个关于浮动的问题想请教一下老师

来源:4-9 小慕医生项目开发(6)

贪食王

2021-01-11 23:13:05

相关代码:

.content .new-and-notice .news .hot-news {
float: left;

}
.content .new-and-notice .news ul {
float: left;

}

问题描述:

医院动态里面需要图片和列表分别设置左浮动才可以在同一排

相关截图:

http://img.mukewang.com/climg/5ffc694c09e29d8a08750347.jpg

问题描述:

在医院公告里面,我把序号设置浮动,那么文字是可以跟序号保持在同一排,但是如果我把文字也同时加上左浮动,反而会掉下去,我想问的是,为啥医院动态里面需要设置2个左浮动来保持同一行,而医院公告只需要符号浮动即可保持同一行,而不需要文字设置浮动呢?

相关截图:

http://img.mukewang.com/climg/5ffc6a7c0908672e03780528.jpg

相关代码:

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

相关截图:

http://img.mukewang.com/climg/5ffc6aed09855f4f03480414.jpg

相关代码:

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

}


写回答

1回答

好帮手慕张

2021-01-12

同学你好,解答如下:

1、dl文字不设置浮动效果如下:

http://img.mukewang.com/climg/5ffd37cb093dcd9e03680116.jpg

dl里面是文字,span浮动之后,dl会向上移动,span遮盖住dl一部分,所以dl里面的内容会环绕span显示。这样就会显示在一行

2、dl文字设置浮动效果如下:

http://img.mukewang.com/climg/5ffd38c109745a5804220179.jpg

因为dl没有设置宽度,dl的宽度默认是内容撑起来的,li的宽度不足以显示内容,所以dl换行显示。

如果给dl设置了宽度,并且宽度小于(li的宽度-span的宽度-span右侧间距9px)剩余的宽度,就可以在右侧显示,例如:

http://img.mukewang.com/climg/5ffd37f7094fe88b06490598.jpg

3、医院动态这里是因为给ul设置了宽度400px,图片宽度是422px,剩下的空间不够大,所以文字区域就会因为不够大而不能一排显示。

http://img.mukewang.com/climg/5ffd3836099d0a5309080353.jpg

4、如果把ul的宽度去掉,也不设置浮动,因为宽度足够大可以放下文字,也能够显示在一排

http://img.mukewang.com/climg/5ffd384f09633fd815700774.jpg

祝学习愉快!

0

0 学习 · 15276 问题

查看课程