2个div左右铺满整个浏览器,左边div一直保持100px,右边的div跟随浏览器大小变化
来源:互联网 发布:动漫大全软件下载 编辑:程序博客网 时间:2024/05/28 23:20
方法一:使用flex
效果如图所示:
<div class="box"> <div class="left"></div> <div class="right"></div></div>
*{ margin:0; padding:0;}.box {/* width: 400px; */ height: 100px; display: flex; flex-direction: row; align-items: center; border: 1px solid #c3c3c3;}.left { flex-basis:100px; -webkit-flex-basis: 100px; /* Safari 6.1+ */ background-color: red; height: 100%;}.right { background-color: green; flex-grow: 1; height: 100%;}
方法二:浮动布局
效果如图所示:
<div id="left">Left</div><div id="right">Right</div>
* { margin: 0; padding: 0;}#left { float: left; width: 100px; height:100px; background-color: green; text-align:center; line-height:100px; color:#fff;}#right { background-color: orange; margin-left: 100px; text-align:center; height:100px; line-height:100px;}
阅读全文
0 0
- 2个div左右铺满整个浏览器,左边div一直保持100px,右边的div跟随浏览器大小变化
- div位置大小不随浏览器变化而变化
- 左右div内容互换(单击左边div里的一项内容,此内容变没,跑到右边div中)
- 实现一个div,左边固定div宽度200px,右边div自适应
- 实现两个div,左边固定div宽度200px,右边div自适应
- 两个div上下平分整个浏览器
- 让body、Div占满整个浏览器的窗口
- 关于html文档中div之间一直存在的20px左右的空隙的解决方法
- 【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)
- 两个div左边的固定宽度,右边的自动填满
- div 左边定宽,右边自适应
- 右边DIV撑满左边固定宽度
- div自适应高度--左右一直
- 左边div固定宽度,右边div宽度自适应
- 两个div并排 左边div宽固定 右边自适应
- 左边div固定宽度,右边div自适应填充
- 两个div并排 左边div宽固定 右边自适应
- 记兄弟连上学的一布局,右边的div在左边的div上面
- C++ STL系列之 STL标准入门必读
- 485芯片中slew-rate-limited是什么意思(转)
- git,掌握这些就够了
- 常用 Git 命令清单
- SVN中trunk,branches,tags用法详解
- 2个div左右铺满整个浏览器,左边div一直保持100px,右边的div跟随浏览器大小变化
- (工作笔记)(参考百度)
- Windows Server 2008 R2部署active directory服务器
- svn: E155004 'XX' is already locked
- 安卓原生工具类--android开发不要盲目写工具了
- 安装ocacle客户端
- java 项目日志log4j以及配置
- 史上最简单的SpringCloud教程 | 第六篇: 分布式配置中心(Spring Cloud Config)
- Spring Cloud | 第一篇:服务注册与发现(Eureka)