元素设置浮动以后,缩放窗口塌陷问题。

项目场景:

浮动元素缩放,高度塌陷。


问题描述:

float

做项目时,元素已经设置了浮动,而且父元素也清除了浮动,但是会出现缩放时,会出现高度塌陷问题。如下图。

<style>

 li{
	float:left;
	width:110px;
	height:90px;
    margin:5px;
    list-style: none;
    background-color: aqua;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

原因分析:

父元素没有设置宽度,会导致缩放失真,元素塌陷,一行排列不下,会换行排列 给父元素设置最小宽度,或者宽度即可。

解决方案:

float-1

 ul{
        /* width: 600px; */或者min-width: 600px;

 }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值