css中左侧固定,右侧自适应_html/css_WEB-ITnose
程序员文章站
2022-05-11 21:48:45
...
谈谈我开始出来工作时候的一道面试题吧
当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div
1.只告诉你宽度; 2.只告诉你高度; 3.宽度和高度告诉你;(我总结了可能的3种方式) HTML:
No1:方法一左侧固定宽度200px右侧自适应
.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 ;}
其实还有很多方法可以实现(其它的我就懒得写了),所谓条条大路通罗马,咳咳,不喜勿喷
推荐阅读
-
左侧固定宽度,右侧自适应宽度的CSS布局
-
左侧固定宽度,右侧自适应宽度的CSS布局
-
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
-
在div中的img左侧总会出现一条竖线_html/css_WEB-ITnose
-
固定右侧边栏滚动特效_html/css_WEB-ITnose
-
css两列布局,一边固定宽度,另一边自适应_html/css_WEB-ITnose
-
一列div宽度固定、一列div宽度自适应_html/css_WEB-ITnose
-
html中的水平居中和垂直居中的问题。(固定高度与高度不定)_html/css_WEB-ITnose
-
CSS:三栏布局,两边固定,中间自适应_html/css_WEB-ITnose
-
DIV/CSS 实现三列,左右两列固定,中间一列自适应_html/css_WEB-ITnose