对于一个盒子,不管这个盒子里面的内容有多少,但是要保证盒子里的内容始终在原来的位置,经过总结,有如下几种实现思路
1. 使用定位的方式(子绝父相定位)
【解决方法1】:内部的盒子使用绝对定位的方式,外部的盒子使用相对定位的方式
.parent {
position: relative;
}
.child {
// 定位之后就可以随便设置子盒子的位置了
position: absolute;
bottom: 0px;
right: 0px;
}
【解决方法二】:使用flex 的布局方式,使用垂直方向贴边的对齐方式就可以解决
// 为了实现盒子里面的内容垂直方向贴边对齐,可以有两种解决方案
display: flex;
flex-direction: column;
justify-content: space-between;
// 为了防止盒子的图片加载速度不能正确显示,需要设置一个最小的高度
min-height: 250px;
【解决方法三】:通过空白数据填充的方式,也就是即使没有数据,但是可以造出来一些空白数据,类似于下面的这种。
<%--
--%>
评论
填写昵称与邮箱即可评论,无需登录。