跳到正文

【CSS布局】实现DIV盒子固定(固定高度或宽度)布局的三种实现思路分析

对于一个盒子,不管这个盒子里面的内容有多少,但是要保证盒子里的内容始终在原来的位置,经过总结,有如下几种实现思路 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; 【解决方法三】:通过空白数据填充的方式,也就是即使没有数据,但是可以造出来一些空白数据,类似于下面的这种。 <%-- --%>

评论

填写昵称与邮箱即可评论,无需登录。

推荐阅读