关于给<li>设定高

关于给<li>设定高

老师我没有明白为什么上课老师说可以通过设置<li>的高度解决下图问题呢?


我的思考是对于第二行这三个医生的盒子,是因为第二个医生的盒子高度没有占满父盒子的原因,并且前两个盒子的宽度和第一个医生盒子左侧的空白宽度占满父盒子。这两个原因导致第三个盒子的左浮动贴向第一个盒子,不知道我的理解正确吗?
http://img1.sycdn.imooc.com//climg/60592da90960187609150302.jpg

但依然有问题,就是这三个医生在医生都是左浮动,为什么第一个盒子左侧会出现空白没有紧贴着父盒子的左侧呢?

还有是不是可以通过设置父盒子的BFC解决这个问题(因为第三个医生的盒子跑出父盒子范围了)?

正在回答

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

2回答

同学你好,关于同学的问题解答如下:

1、因为第一行的第二个元素的高度没有占满父元素,因此导致第二行的元素去占据第一行第二个元素的剩余空间,所以视觉上看到的效果是第二行的第一个元素在第一行第二个元素下面,解决方法是给li设置高度,让每个li的高度一致,这样第二行的li就不会去补空隙,而是直接从最左侧开始排列。

​2、同学的理解是正确的

3、关于左侧有空白没有贴紧父元素的问题,建议同学将代码上传上来,老师这里测试没有复现这个问题。

4、这个案例里不能通过设置父元素的BFC解决哟

祝学习愉快!

  • weixin_慕丝2377090 提问者 #1

    老师,请问是不是如果不给<li>设置固定的高度直接使用BCF,只是遮盖超出的内容。在给盒子设定固定高度再采用BCF才能取消浮动?

    2021-04-11 13:39:14
好帮手慕星星 2021-04-11 18:26:37

同学你好,li如果没有设置高度,那么添加overflow:hidden;属性无作用。所以这里直接给li设置高度即可,不要考虑特别复杂。

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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