前端面试之两栏布局，左侧固定右侧自适应；三栏布局，左右定宽，中间自适应

Bertha 。 2022-06-14 07:17 254阅读 0赞

左右布局：左边定宽、右边自适应，

1.1浮动方法，使第一个div浮动起来脱离文档流，下面的div自动向上

先看代码

<style>

body\{margin:0;\} //为了统一布局，去掉了浏览器自带body的margin值

.left\{ width:200px; float:left; height:400px;; background:\#99F;\}

.main\{ height:400px; background:\#CCC;\}

</style>

<body>

<div class="left">左侧</div>

<div class="main">主要</div>

</body>

1.2 绝对定位法

此方法的原理大体就是将左侧的块元素设置为position:absolute;右侧默认宽度，且将margin-left的值设为200px，即为左栏的宽度。

<style>

body\{margin:0;\}

.left\{ position:absolute; top:0; width:200px; height:400px; background:\#99F; left:0;\}

.main\{ height:400px; background:\#CCC; margin-left:200px;\}

</style>

<body>

<div class="left">左侧</div>

<div class="main">主要</div>

</body>

1.3弹性盒

display：flex; 设置为弹性盒子，其子元素可以通过设置 flex 的数值来控制所占空间的比例。

body\{margin:0; display: flex\}

.left\{ width:200px; height:400px; background:\#99F; left:0;\}

.main\{ height:400px; background:\#CCC; flex: 1\}

</style>

<body>

<div class="left"></div>

<div class="main"></div>

</body>

2、左右定宽中间自适应宽度

1.1浮动方法，使第一个div浮动起来脱离文档流，下面的div自动向上

<style>

body\{margin:0;\}  
    .left\{ width:200px; float:left; height:400px;; background:\#99F;\}  
    .right\{ width:200px; float:right; height:400px; background:\#39F;\}  
    .main\{ height:400px; background:\#CCC;\}  
</style>  
<body>  
<div class="left">左</div>  
<div class="right">右</div>  
<div class="main">中</div>

2.2 绝对定位法

<style>

body\{ margin:0;\}

.left,.right\{ position:absolute; top:0; width:200px; height:400px;\}

.left\{ background:\#99F; left:0;\}

.right\{ background:\#39F; right:0;\}

.main\{ height:400px; background:\#CCC; margin:0 200px;\}

</style>

<body>

<div class="left"></div>

<div class="right"></div>

<div class="main"></div>

</body>

<style>

1.3弹性盒

display：flex; 设置为弹性盒子，其子元素可以通过设置 flex 的数值来控制所占空间的比例。

body\{margin:0; display: flex\}

.left\{ width:200px; height:400px; background:\#99F; left:0;\}

.main\{ height:400px; background:\#CCC; flex: 1\}

.right\{ width:200px; height:400px; background:\#99F; left:0;\}

</style>

<body>

<div class="left"></div>

<div class="main"></div>

<div class="right"></div>

</body>

发表评论取消回复

表情：

评论列表（有 0 条评论，254人围观）

还没有评论，来说两句吧...

相关阅读

相关如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

在前端日常布局中，会经常遇到左侧宽度固定，右侧自适应或者左右两边固定，中间部分自适应的实用场景。本文例子中将列举出两种常用的两栏布局，左侧固定右侧自适应的常用方法以及代码...

谁践踏了优雅/ 2024年04月24日 20:59/ 0 赞/ 16 阅读

相关如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

![图片][4771bd453eb50524b701a776732af6a3.png] 一、背景在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高 PS:

╰半橙微兮°/ 2023年01月16日 02:50/ 0 赞/ 102 阅读

相关面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

![206d25cce0979cc08e5b22727c65201b.png][] 一、背景在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高 PS: 文

ゝ一纸荒年。/ 2022年11月17日 10:11/ 0 赞/ 174 阅读

相关 html两栏自适应布局,CSS 实现：两栏布局（一边固定，一边自适应）

☊【实现要求】：CSS实现左边固定，右边自适应父容器宽度的两栏布局。 √【实现】： // html 和 body 的高度默认为0，因此要先设置为100%，并且清除默认样式(

浅浅的花香味﹌/ 2022年10月07日 09:52/ 0 赞/ 173 阅读

相关 CSS 两列布局---左侧固定，右侧自适应

前端一个小面试题总结如下： 1、方法一，高度100%，左侧float，右侧自动宽度（会自动占满剩余宽度）。 2、方法二，绝对定位absolute，使用方法一的HTML结

妖狐艹你老母/ 2022年07月19日 06:26/ 0 赞/ 179 阅读

相关前端面试之两栏布局，左侧固定右侧自适应；三栏布局，左右定宽，中间自适应

左右布局：左边定宽、右边自适应， 1.1浮动方法，使第一个div浮动起来脱离文档流，下面的div自动向上先看代码 <style> body\{margin:0;\}

Bertha 。/ 2022年06月14日 07:17/ 0 赞/ 255 阅读

相关左侧固定宽右侧自适应（CSS布局面试题）

左侧固定，右边自适应这是一个很常用的css布局，尤其是在后台页面当中，使用频繁。同事也是面试当中常常问到的考点。今天，我们就来终结一下。第一种方法：浮动布局

怼烎@/ 2022年06月14日 03:51/ 0 赞/ 172 阅读

相关三栏布局——左右固定，中间自适应

之前有写过关于固定父布局，然后父布局内有是两列自适应。现在我们来看看三栏布局，当左右固定，中间的布适应是如何实现的。这里将介绍两种方法，一种是使用margin值，另

Dear 丶/ 2022年06月12日 01:45/ 0 赞/ 232 阅读

相关七种实现左侧固定，右侧自适应两栏布局的方法

总结一下左边固定，右边自适应的两栏布局的七种方法。其中有老生常谈的`float`方法,BFC方法，也有CSS3的`flex`布局与`grid`布局。并非所有的布局都会在开发中使

迷南。/ 2022年04月25日 05:58/ 0 赞/ 123 阅读

相关 CSS布局 -- 左右定宽，中间自适应

左右定宽，中间自适应 ![200929295746183.png][] 有几种方法可以实现改变窗口大小看看？方案一：左右设置绝对定位，定宽，中间设置margin

分手后的思念是犯贱/ 2021年12月17日 06:34/ 0 赞/ 345 阅读