在页面布局中，CSS如何实现左侧宽度固定，右侧宽度自适应的布局？
2024-09-06 20:34:11
首先给出DOM结构
<divclass="box">
<divclass="box-left"></div>
<divclass="box-right"></div>
</div>
1.利用float + margin实现
.box {
height: 200px;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
float: left;
background-color: blue;
}
.box-right {
margin-left: 200px;
background-color: red;
}
2.利用calc计算宽度
.box {
height: 200px;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
float: left;
background-color: blue;
}
.box-right {
width: calc(100% - 200px);
float: right;
background-color: red;
}
3.利用float + overflow实现
.box {
height: 200px;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
float: left;
background-color: blue;
}
.box-right {
overflow: hidden;
background-color: red;
}
4.利用flex实现
.box {
height: 200px;
display: flex;
}
.box > div {
height: 100%;
}
.box-left {
width: 200px;
background-color: blue;
}
.box-right {
flex:; // 设置flex-grow属性为1，默认为0
overflow: hidden;
background-color: red;
}
最新文章
- IP地址，子网掩码，默认网关，DNS服务器详解
- 如何使用查尔斯代理抓取https请求
- Python全栈开发day7
- ZeroMQ(java)中的数据流SessionBase与SocketBase
- ZOJ 4257 MostPowerful（状压DP，简单）
- 依网友要求发个修改award bios的方法（刷CPU微码）
- 在uboot上创建菜单
- You don't have permission to access /phpmyadmin/main.php on this server.
- 【IOS学习基础】文件相关
- 《c陷阱与缺陷》笔记--注意边界值
- JNI只C性能测试
- 接口测试基础（fiddler、postman的使用、python实现测试接口程序）
- Java面试题——中级（上）
- 微信小程序转发微信小程序转发
- websocket 实现单聊群聊 以及 握手原理+加密方式
- 2017-12-19python全栈9期第四天第二节之列表的增删查改之按索引改和按切片改
- 玩转MQTT-阿里云之MQTT使用
- Neo4j导入本地csv问题
- 详解java中的byte类型
- day32基于tcp协议的远程执行命令