左侧固定,右侧自适应(两种方法任选)
发布时间:2016-12-23 10:59:12 作者:MrLQZ 我要评论
本文主要介绍了左侧固定,右侧自适应的两种实现方法,相信对大家学习网页布局会有很好的帮助,下面就跟小编一起来看下吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
第一种方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Document</ title > < style > .one { position: absolute; height: 200px; width: 300px; background-color: blue; } .two { height: 200px; margin-left: 300px; background-color: red; } </ style > </ head > < body > < div class = "one" ></ div > < div class = "two" >第一种方法</ div > </ body > </ html > |
第二种方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Document</ title > < style > .one { float:left; height: 200px; width: 300px; background-color: blue; } .two { overflow: auto; height: 200px; background-color: red; } </ style > </ head > < body > < div class = "one" ></ div > < div class = "two" >第二种方法</ div > </ body > </ html > |
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
- 下面小编就为大家带来一篇CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-26
- 这个是我练习做网页查资料查到的,有很多不错的布局。将其总结,并写上自己使用的一些感悟。2010-02-23
最新评论