移动开发-两栏自适应
程序员文章站
2022-07-13 16:35:50
...
左边固定，右边自适应的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
推荐阅读
-
移动开发-两栏自适应
-
css实现两栏布局，左侧固定宽，右侧自适应的多种方法
-
小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航
-
css 折行、两栏自适应布局 、子元素等高
-
CSS：三栏布局，两边固定，中间自适应_html/css_WEB-ITnose
-
关于Finereport移动端报表二次开发的两个小例子
-
CSS实现三栏自适应布局（两边宽度固定，中间自适应）
-
Flutter跨平台移动端开发丨封装底部导航栏部件 Tab
-
左右两栏宽度自适应，中间一栏宽度固定_html/css_WEB-ITnose
-
css实现的左右两栏宽度自适应中间一栏宽度固定_html/css_WEB-ITnose