css中左侧固定,右侧自适应_html/css

来源：懂视网责编：小采时间：2020-11-27 16:12:35

css中左侧固定,右侧自适应_html/css

css中左侧固定,右侧自适应_html/css_WEB-ITnose:谈谈我开始出来工作时候的一道面试题吧当初我记得在太平洋网络面试的时候，面试官给我出了这么一道题：有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度; 2.只告诉你高度; 3.宽度和高度告诉你;(我总结了可能的3种方式） HTML：

推荐度：

点击下载本文 文档为doc格式

导读css中左侧固定,右侧自适应_html/css_WEB-ITnose:谈谈我开始出来工作时候的一道面试题吧当初我记得在太平洋网络面试的时候，面试官给我出了这么一道题：有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度; 2.只告诉你高度; 3.宽度和高度告诉你;(我总结了可能的3种方式） HTML：

谈谈我开始出来工作时候的一道面试题吧

当初我记得在太平洋网络面试的时候，面试官给我出了这么一道题：有一个外层的div 中间有左右两个div 要求左侧的div

1.只告诉你宽度; 2.只告诉你高度; 3.宽度和高度告诉你;(我总结了可能的3种方式） HTML：

左侧固定宽度200px右侧自适应

No1:方法一

.container{width: 100%; }.left{color:red; background: gray; float: left; height: 100px}//左侧的div.right{color:red; background: blue; margin-left: -200px;}//右侧的div

No2：方法二

.container{width: 100%;}.left {width:200px; background:#fcc; position:absolute; left:0 ;z-index:1 }.right {width:100%; background:#ccc; position:absolute; left:0}

　　　　　　　No3：方法三

.container{width:100%}.left { background-color: green; float: left; width: 200px; margin-right: -100%; }.right { float: left; width: 100%;margin-left: 200px; background-color:blue; }

No4：方法四

.container{width:100%}.left{position: absolute; top:0; left:0; width:200px; background: #ff0;}.right{ margin-left: 200px; background: #f0f;}

No5：方法5

.container{width:100%}.left{ position: absolute; top:0 ; left:0 ;width:200px; background:blue;}.right{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background:red ;}

其实还有很多方法可以实现（其它的我就懒得写了），所谓条条大路通罗马，咳咳，不喜勿喷

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

css中左侧固定,右侧自适应_html/css

推荐度：

点击下载本文 文档为doc格式

标签：固定右边右侧

热门焦点

css中左侧固定,右侧自适应_html/css

css中左侧固定,右侧自适应_html/css

css中左侧固定,右侧自适应_html/css

最新推荐

猜你喜欢

热门推荐