css两列自适应宽度布局（左定宽，右自适应）
2024-10-19 20:35:51
1、利用BFC：
<div id="root">
<div class="left">左</div>
<div class="right">右</div>
</div>
#root {
height: 300px;
}
.left {
float: left;
width: 200px;
height: 80%;
background-color: rgba(255, 0, 0, 0.5);
}
.right {
height: 100%;
background-color: green;
}
现在结果如上图的效果，为什么呈现这种效果？
每个元素的margin box（.left、.right）的左边， 与包含块border box（#root）的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。所以.left盖在.right的上方。
怎么解决这种问题呢？-----BFC的区域不会与float box重叠。我们让.right成为一个BFC应该就可以了。
#root {
height: 300px;
}
.left {
float: left;
width: 200px;
height: 80%;
background-color: rgba(255, 0, 0, 0.5);
}
.right {
height: 100%;
background-color: green;
overflow: hidden; // 触发，成为BFC
}
可以了，达到我们想要的效果。
2、css3有了flex属性，轻而易举就实现这种布局，第一种方法当做开阔眼界吧。
#root {
height: 300px;
display: flex;
}
.left {
width: 200px;
height: 80%;
background-color: rgba(255, 0, 0, 0.5);
}
.right {
flex:;
background-color: green;
}
最新文章
- 计算机程序的思维逻辑 (53) - 剖析Collections - 算法
- Oracle插入日期格式出现 ORA-01843: not a valid month的解决办法
- 数字限时增长效果实现：numberGrow.js
- vld使用
- WPF的二维绘图（二）——几何图形Geometry
- HTML+CSS学习笔记
- js设计模式-建造者模式
- 方法：查询MongoDB数据库中最新一条数据(JAVA)
- SSH2配置事务的两种方式
- 基于visual Studio2013解决算法导论之028散列表开放寻址
- jquery的冒泡事件event.stopPropagation()
- net core 使用tagHelper将 enum枚举类型转换为下拉列表select
- redis3.0.7集群部署手册
- 70后.net老猿，尚能饭否？
- Android Studio连接天天模拟器
- 在windows上构建LLVM 7.0.1
- POJ 1833 排序
- Mosquitto服务器的搭建以及SSL/TLS安全通信配置
- 【POJ】2229 Sumsets（递推）
- 【创客+】偷心锁屏创始人Jerry创业心得分享