css自适应弹性盒布局怎么实现自适应全屏
方法/步骤
-
1
新建html文件
-
2
创建div及其内容
-
3
创建div样式
-
4
预览效果如图
-
5
去除最外边和中间div的宽度
-
6
预览效果如图
-
7
添加
-webkit-box-flex:1;
-moz-box-flex:1;
样式使其自适应浏览器的宽度
-
8
预览效果如图
-
9
缩小浏览器窗口，中间div的宽度随之缩小
-
10
添加margin:0; padding:0;样式去除左右上下的空隙
-
11
预览效果如图
附上样式
<style>
body{margin:0; padding:0;}
#wrap{
/* width:1000px;
margin:0 auto;*/
display:-webkit-box;
display:-moz-box;}
#left{
width:300px;
padding:10px;
background:#09F;
}
#content{
/*width:400px;*/
padding:10px;
background:#30C;
-webkit-box-flex:1;
-moz-box-flex:1;
}
#right{
width:300px;
padding:10px;
background:#F0F;
}
#left,#content,#right{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;}
</style>
END
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部
文章评论