css实现自适应宽度布局
2024-08-28 15:26:50
1.实现左侧宽度固定,右侧全屏自适应。
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-left:200px}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-100%} <body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="right">aside</div>
</body>
2.实现左侧与右侧宽度固定,中间部分全屏自适应。
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-left:200px;margin-right:200px}
.left{ width:200px; height:300px; float:left; background:yellow; margin-left:-100%}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-200px}
</style> <body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="left">aside</div>
<div class="right">aside</div>
</body>
最新文章
- flask在windows上用mod_wsgi部署
- selenium使用等待的几种方式
- OpenShare:前所未有的开放性
- OpenCV+QT开发环境(一):Windows环境
- BIND9配置文件详解模板[转载]
- POJ3122Pie(二分)
- Xcode 7.3.1的模拟器路径
- 14.javaweb AJAX技术详解
- vue搭建环境
- video.js不能控制本地视频或者音频播放时长
- Linux Shell下”>;/dev/null 2>;&;1“相关知识说明
- 关于.net后台的异步刷新的问题
- 解决腾讯云封锁SS(shadow--socks)访问google问题
- bzoj2243 树链剖分
- display position 和float的作用和关系
- Android异步处理系列文章四篇之三
- 第八天py
- git 从远程拉取代码、推代码的步骤
- 集成学习总结 &; Stacking方法详解
- SSIS 学习之旅 FTP文件传输-FTP任务