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即可。另外，我留给大家一个思考的问题。还有别的办法吗？

上一篇：基于Vue2前端，将网页数据转Excel并导出

下一篇：响应式布局方案_0

CSS-Two-columnlayout相关文章