请选择 进入手机版 | 继续访问电脑版
查看: 150|回复: 1

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

[复制链接]

699

主题

740

帖子

5977

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5977
发表于 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>






上一篇:【浏览器插件】一款可以高效进行网站技术分析的Wappalyzer插件
下一篇:【windows软件】精简小巧十分好用的绿色版马赛克小工具AddMscv3.0版
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案; 如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子分类或者标题加上【已解决】。
回复过本主题
的还回复过:

0

主题

9

帖子

20

积分

新手上路

Rank: 1

积分
20
发表于 2019-3-4 18:34:42 | 显示全部楼层
路过~
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案; 如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子分类或者标题加上【已解决】。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

微信扫一扫

我爱科技论坛(www.52tech.tech)旨在打造全网最大的免费资源共享平台。目前论坛包括考研资料、编程学习、黑科技/科学上网、开源软件等资源模块,竭力服务于正在学习道路上的每一个人。我爱科技论坛,爱科技,更爱分享。致力于营造一个资源丰富、内容完善的大型网络学习交流资源共享平台!

QQ|Archiver|手机版|小黑屋|我爱科技论坛 快乐学习交流

(请勿发布违反中华人民共和国法律法规的言论,会员观点不代表我爱科技论坛的官方立场)

Powered by Discuz! X3.4© 2001-2013 Technology Inc.

返回顶部 返回列表