有个关于浮动的问题想请教一下老师
来源: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;
}
问题描述:
医院动态里面需要图片和列表分别设置左浮动才可以在同一排
相关截图:
问题描述:
在医院公告里面,我把序号设置浮动,那么文字是可以跟序号保持在同一排,但是如果我把文字也同时加上左浮动,反而会掉下去,我想问的是,为啥医院动态里面需要设置2个左浮动来保持同一行,而医院公告只需要符号浮动即可保持同一行,而不需要文字设置浮动呢?
相关截图:
相关代码:
.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;
}
相关截图:
相关代码:
.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文字不设置浮动效果如下:
dl里面是文字,span浮动之后,dl会向上移动,span遮盖住dl一部分,所以dl里面的内容会环绕span显示。这样就会显示在一行
2、dl文字设置浮动效果如下:
因为dl没有设置宽度,dl的宽度默认是内容撑起来的,li的宽度不足以显示内容,所以dl换行显示。
如果给dl设置了宽度,并且宽度小于(li的宽度-span的宽度-span右侧间距9px)剩余的宽度,就可以在右侧显示,例如:
3、医院动态这里是因为给ul设置了宽度400px,图片宽度是422px,剩下的空间不够大,所以文字区域就会因为不够大而不能一排显示。
4、如果把ul的宽度去掉,也不设置浮动,因为宽度足够大可以放下文字,也能够显示在一排
祝学习愉快!
相似问题