CSS float布局换行不正确的原理及解决办法

问题

最近在给博客添加友链的时候遇到一个float布局的问题:
多个div元素进行float布局时,如果某个元素出线高度不一致问题,达不到理想的排列布局。

现象

页面利用media属性和float实现响应式布局
满窗口是如下效果:
大窗口效果

缩小窗口,效果如下图,多处了红色矩形部分的空白:
小窗口错误效果

原理

然后去看了下float的定义:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动的边框为止。
也就是本来第二行的想float到左边,然后碰上了第一块的底部就停下了。于是边多出了红色矩形空白部分。

解决办法

解决办法就是控制每一个卡片div元素等高,这样就避免窗口缩小时下一行元素触碰到上一行元素,这里我是控制每个卡片的文字个数解决的,也可以用hidden属性避免卡片文字过多换行

最终理想效果:
理想效果

感谢您的阅读,本文由 雪释潮涯的博客~ 版权所有。如若转载,请注明出处: 雪释潮涯的博客~( https://www.xschaoya.com
一次头疼的经历--借钱
python-dict查找两字典的相同点

推荐阅读

留下足迹