移动开发-两栏自适应

最新推荐文章于 2024-03-11 08:00:00 发布

Primise7

最新推荐文章于 2024-03-11 08:00:00 发布

阅读量321

点赞数

分类专栏：前端 js 移动端文章标签：移动开发

本文链接：https://blog.csdn.net/qq_29412527/article/details/81060139

版权

前端同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

25 篇文章 0 订阅

订阅专栏

移动端

11 篇文章 0 订阅

订阅专栏

左边固定，右边自适应的3种总结:

左边左浮动，右边加个overflow:hidden;
#lt{ float: left;width:200px; background: #ff0;}
#rt{ overflow: hidden; background: #f0f;}
左边左浮动，右边加个margin-left;
#lt{ float: left; width:200px; background: #ff0;}
#rt{ margin-left: 200px; background: #f0f;}
左边绝对定位，右边加个margin-left;
#lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}
#rt{ margin-left: 200px; background: #f0f;}

方法1： padding实现

一栏定位+固定宽度，另一栏用padding实现

(如果是用定位+百分比来做的话，在移动端，所有的border都属于content,不好处理)

<style>
    .box {
       min-width: 320px;
        max-width: 640px;
        height: 500px;
        border: 1px solid #000;
        margin: 0 auto;
        position: relative;
    }
    .boxFix {
        height: 100%;
        width: 100px;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
    }
    .boxMove {
        height: 100%;
        background-color: sandybrown;
        padding-left: 100px;
    }
</style>

<div class="box">
<div class="boxFix">固定栏</div>
<div class="boxMove">padding实现</div>
</div>

方法二：利用overflow:hidden

overflow:hidden
有个特性：让当前盒子绝对独立，绝缘。不会受到浮动元素的影响。

/*文字围绕现象：/*
<style>
    .boxFix {
        width: 50px;
        height: 50px;
        float: left;
        background-color: sandybrown;
    }

</style>

<body>
<div class="boxFix"></div>
<div class="boxMove">内容此处省略无数字</div>
</body>

文字围绕现象：

但是当给boxMove添加overflow:hidden之后，就能实现左边盒子固定，右边boxMove盒子宽度自适应：

/*只需要CSS样式加这一条：*/
.boxMove {
        overflow: hidden;
    }

同时，元素原本的流体特性依然保留了。也就是，虽然不与浮动交集，自动退避浮动元素宽度的距离，但，本身作为普通元素的流动性依然存在，反映在布局上就是自动填满除去浮动内容以外的剩余空间。哟，这不就是自适应布局嘛！！

BFC

BFC:Block Formatting Context中文为块级格式化上下文
BFC表现规则：内部子元素再怎么翻江倒海都不会影响外部的元素
什么时候会触发BFC呢？

常见的如下：

float的值不为none。
overflow的值为auto,scroll或hidden。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

而刚刚的例子则是：跟随div添加overflow:hidden触发BFC

Primise7

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动开发-两栏自适应

左边固定，右边自适应的3种总结:左边左浮动，右边加个overflow:hidden; #lt{ float: left;width:200px; background: #ff0;} #rt{ overflow: hidden; background: #f0f;}左边左浮动，右边加个margin-left; #lt{ float: left; width:200px; backgr...
复制链接

扫一扫

专栏目录