多种方式实现自适应布局（以两边固定中间自适应为例）

最新推荐文章于 2023-08-30 16:07:08 发布

合远

最新推荐文章于 2023-08-30 16:07:08 发布

阅读量1k

点赞数

分类专栏：网页布局文章标签：布局自适应布局

本文链接：https://blog.csdn.net/quanquanhe526/article/details/78390855

版权

首先常见的两种布局是响应式布局（随着屏幕的大小可以进行不同的排版）与自适应布局（随着屏幕大小的改变只会进行相应的放大或缩小）
自适应的体验http://m.ctrip.com/html5/
响应式的体验 http://segmentfault.com/
本片主要讨论自适应布局：
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属
也就是普通流、绝对定位、浮动三种定位机制。CSS3中的transform、弹性盒子模块（flex）、试验中的grid模块算是新型布局方案。
1、普通流布局（ display：inline-block）
实现圣杯布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>宽度自适应布局</title>
        <style>
            .wrap {
                background-color: #FBD570;
                font-size: 0;
                letter-spacing: -4px;  /*用于兼容safari，根据不同字体字号或许需要做一定的调整*/
                margin-left: 100px;
                margin-right: 150px;
            }
            .wrap * {
                font-size: 1rem;
                letter-spacing: normal;
            }
            .left {
                display: inline-block;
                vertical-align: top;
                width: 100px;
                background: #00f;
                height: 180px;
                margin-left: -100px;
            }
            .right {
                display: inline-block;
                vertical-align: top;
                   width: 150px;
                background: #0f0;
                height: 200px;
                margin-right: -150px;
            }
            .center {
                display: inline-block;
                vertical-align: top;
                background: #B373DA;
                height: 150px;
                min-width: 150px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="left">left，宽度高度固定</div>
            <div class="center">center，可以自适应浏览器宽度，高度固定。</div>
            <div class="right">right，宽度高度固定</div>
        </div>
    </body>
</html>

使用inline-block需注意：inline-block元素会有4px左右的空隙，这个是因为我们写代码时候

最低0.47元/天解锁文章

合远

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
多种方式实现自适应布局（以两边固定中间自适应为例）

首先常见的两种布局是响应式布局（随着屏幕的大小可以进行不同的排版）与自适应布局（随着屏幕大小的改变只会进行相应的放大或缩小）自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 本片主要讨论自适应布局：布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属也就
复制链接

扫一扫