css的经典三栏布局如何实现,css 实现三栏布局的四种方式

三栏布局就是左中右，左右两边固定，中间自适应。

1. 绝对定位

左边

中间

右边

body {

padding: ;

margin: ;

}

/* 绝对定位 */

.left, .right {

position: absolute;

top: ;

}

.left {

background: red;

width: 200px;

left: ;

}

.middle {

background: blue;

margin: 200px;

}

.right {

background: green;

width: 200px;

right: ;

}

2. flex

左边

中间

右边

body {

display: flex;

padding: ;

margin: ;

}

.left {

background: blue;

flex: 200px ;

}

.middle {

background: red;

flex: ;

}

.right {

background: green;

flex: 200px;

}

3. 双飞翼

中间

左边

右边

body {

padding: ;

margin: ;

}

.left, .middle, .right {

float: left;

}

.left {

background: red;

width: 200px;

margin-left: -%; /* 使left移到middle的左边 */

}

.right {

background: red;

width: 200px;

margin-left: -200px; /* 使right移到middle的右边 */

}

.middle {

background: blue;

width: %;

}

.inner {

margin: 200px;

}

4. 浮动

左边

右边

中间

.left {

float: left;

background: blue;

width: 200px;

}

.middle {

margin: 200px;

background: red;

width: %;

}

.right {

float: right;

background: green;

width: 200px;

}

参考：https://segmentfault.com/a/1190000007729716

CSS三栏布局的四种方法

总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...

CSS实现三栏布局(5种)

常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...

前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应

前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...

【CSS】三栏布局的经典实现

要求:自适应宽度,左右两栏固定宽度,中间栏优先加载:

layout

三栏布局的n种实现

本文主要讨论左右边栏固定宽度,中间栏填满其余空间的布局.至于其他类型,基本上也就是半斤和八两.每一种布局都会有个Demo,个人依然认为文章里帖代码并没有Demo来的直接.所以正文负责解释,源码参见De ...

css实现三栏布局，两边定宽，中间自适应

1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #b ...

Layout 实现三栏布局的几种方法

https://github.com/ljianshu/Blog/issues/14    布局参考 https://github.com/ljianshu/Blog/issues/38  响应式那点 ...

三种方法实现CSS三栏布局

本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...

CSS布局 - 三栏布局

CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

随机推荐

数据类型之记录(record)..With XXX do begin... end;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 type   Mai ...

vim 分屏功能

分屏启动Vim 使用大写的O参数来垂直分屏. vim -On file1 file2 ... 使用小写的o参数来水平分屏. vim -on file1 file2 ... 注释: n是数字,表示分成几 ...

RocketMQ源码 — 三、 Consumer 接收消息过程

Consumer pull message 订阅 在Consumer启动之前先将自己放到一个本地的集合中,再以后获取消费者的时候会用到,同时会将自己订阅的信息告诉broker 接收消息 consume ...

找出程序GasMileage中的哪一行与下列叙述相对应：

找出程序GasMileage中的哪一行与下列叙述相对应: a.通知程序将使用Scanner类   import java.util.Scannner; b.创建一个Scanner类的对象   Scan ...

python之字符串中有关%d,%2d,%02d的问题

python之字符串中有关%d,%2d,%02d的问题 在python中,通过使用%,实现格式化字符串的目的.(这与c语言一致) 其中,在格式化整数和浮点数时可以指定是否补0和整数与小数的位数. 首先 ...

Android 启动、绘制、显示过程

Activity 启动过程: startActivity()-> Instrumentation.execStartActivity()-> Binder->ActivityMana ...

Service 的 onStartCommand(Intent, int, int) 返回值

(1)START_NOT_STICKY If the system kills the service after onStartCommand() returns, do not recreate ...

Apache下开启SSI配置，使html支持include包含

有的时候,我们的页面有公共的导航栏navbar,公共的脚注footer,那么我们就想把这些公共部分独立成一个html文件,在要引用的地方像引用js,css一样,给包含进来. Apache下开启SSI配 ...

Linux下Meepops的搭建

1.下载跟版本相对应的扩展 http://br.php.net/downloads.php 2.进入到pcntl目录 cd php-5.4.45/ext/pcntl 3.先执行phpize /usr/ ...

IIS与ASP.NET中的线程池

1. W3 Thread Pool(W3TP) 当处于内核模式的http.sys接收到来自用户的请求之后,会将请求放入队列中.那处于用户模式的w3wp进程如何从内核模式的队列中取出请求呢?I/O完成端 ...