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

admin · 发表于 2018-10-25 18:54:55

对于一个盒子，不管这个盒子里面的内容有多少，但是要保证盒子里的内容始终在原来的位置，经过总结，有如下几种实现思路
1. 使用定位的方式（子绝父相定位）
【解决方法1】：内部的盒子使用绝对定位的方式，外部的盒子使用相对定位的方式

[CSS] 纯文本查看 复制代码

    .parent {
        position: relative;
    }
    .child {
        // 定位之后就可以随便设置子盒子的位置了
        position: absolute;
        bottom: 0px;
        right: 0px;
    }

【解决方法二】：使用flex 的布局方式，使用垂直方向贴边的对齐方式就可以解决

[CSS] 纯文本查看 复制代码

// 为了实现盒子里面的内容垂直方向贴边对齐，可以有两种解决方案
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            // 为了防止盒子的图片加载速度不能正确显示，需要设置一个最小的高度
            min-height: 250px;

【解决方法三】：通过空白数据填充的方式，也就是即使没有数据，但是可以造出来一些空白数据，类似于下面的这种。

[Java] 纯文本查看 复制代码

<c:when test="${message.id == null}">
                                                    <%--<tr style="border: 0px;">
                                                        <td style="border: none">  </td>
                                                        <td style="border: none">  </td>
                                                        <td style="border: none">  </td>
                                                        <td style="border: none">  </td>
                                                    </tr>--%>
                                                </c:when>

jsz · 发表于 2019-3-4 18:34:42

路过~

		自动登录	找回密码
密码			立即注册

[技术分享] 【CSS布局】实现DIV盒子固定（固定高度或宽度）布局的三种实现思路分析

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老