三栏布局就是左中右,左右两边固定,中间自适应。
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完成端 ...