当前位置: 首页 > Web前端 > CSS

CSS-Two-columnlayout

时间:2023-03-31 13:22:10 CSS

双列布局(一侧固定宽度,另一侧自适应),工作中应该经常用到,可以说是前端基础。然而,在一次面试中,面试官:把你能想到的双栏式布局的所有方式都写在纸上。我心想:这不容易。仔细想想……突然!话不多说,上菜吧!absolute+margin方法fixed

adaptive
.container{position:relative;}.sidebar{位置:绝对;顶部:0;左:0;高度:300px;宽度:200px;背景:#67c23a;}.main{margin-left:200px;高度:300px;background:#e6a23c;}修改css可以实现位置交换,如下:.sidebar{right:0;/*...*/}.main{margin-right:200px;/*...*/}优点:交换固定
自适应顺序,实现主要内容的优先加载和渲染.缺点:绝对定位,脱离文档流,当侧边栏栏的高度超过主栏的高度时,会覆盖下面的元素。需要为父框设置overflow属性。float+margin方法fixedadaptive.sidebar{float:left;顶部:0;右:0;高度:300px;宽度:200px;背景:#67c23a;}.main{margin-left:200px;高度:300px;背景:#e6a23c;}也支持位置交换:.sidebar{float:right;/*...*/}.main{margin-right:200px;/*...*/}缺点:主要内容无法先加载渲染。浮动+负边距自适应固定.wrap{float:left;width:100%;}.main{左边距:200px;高度:300px;背景:#e6a23c;}.sidebar{浮动:左;左边距:-100%;高度:300px;宽度:200px;:#67c23a;}位置交换:.main{margin-right:200px;/*...*/}.sidebar{float:right;左边距:-200px;/*...*/}flex方法自适应固定.container{显示:flex;}.main{flex:1;高度:300px;背景:#e6a23c;}.sidebar{flex:none;/*高度:300px;*/宽度:200px;将保持与.container相同的高度。.container的高度由.main展开,与.main的高度相同。位置交换:.container{display:flex;flex-direction:row-reverse;}网格方法自适应固定。容器{显示:网格;网格模板列:自动200px;grid-template-rows:300px;}.main{background:#e6a23c;}.sidebar{background:#67c23a;}这里.main和.sidebar的高度如果不单独设置,也是一样的高度。位置交换:.container{display:grid;网格模板列:200px自动;网格模板行:300px;网格模板区域:'ab';}.main{网格区域:b;背景:#e6a23c;}.sidebar{网格区域:a;背景:#67c23a;}float+BFC方法fixedAdaptive.sidebar{向左飘浮;宽度:200px;高度:300px;背景:#67c23a;}.main{溢出:隐藏;高度:300px;背景:#e6a23c;}位置交换:.sidebar{float:right;/*...*/}这里让.main成为BFC主要是为了消除.sidebar由于float的影响,只要.main能成为BFC即可。另外,我留给大家一个思考的问题。还有别的办法吗?