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完成端 ...
css的经典三栏布局如何实现,css 实现三栏布局的四种方式相关推荐
- Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目 录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
- css样式引入形式php,引入css样式表的四种方式介绍
一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. 这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签: 将样式规则写在标签之 ...
- css设置子盒子水平垂直居中(四种方式)
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
- 如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
- 引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...
- vue编写一个登录页面,使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
- Android:按键响应方式第一种onClick属性,第二种方法接口类,第三种方式匿名内部类,第四种方式Activity
一.在xml 中设置按键的onClick 绑定的函数 新建一个工程 然后在相关的页面添加一个Button 运行一下 实际上,现在这个按键一,我们去运行的时候,他是没有任何的反馈的,我们按完它,他没有任 ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- python函数调用的三种方式_python函数调用的四种方式
原标题:python函数调用的四种方式 第一种:参数按顺序从第一个参数往后排#标准调用 运行结果: 第二种:#关键字调用 注意:关键调用从哪开始的,从哪以后都必须使用关键字调用除了'*'收集参数.不能 ...
- 【详细】传参的四种方式以及返回传值的三种方式
[转载]本文主要参考链接下博主文章,再行总结的 传参的四种方式 按值传参 在调用函数时,将实参的值拷贝给形参,形参在函数中被使用.对形参的操作不会影响到实参的值.但是因为发生了拷贝会增加系统开销. p ...
最新文章
- MySql 扩展存储引擎
- 【逆强化学习-0】Introduction
- 通过这本拼图学习Bash
- java写的教育管理的项目_干货分享|推荐12款适合做Java后台管理系统的项目
- /plus/recommend.php sql注入漏洞,代码审计:ThinkPHP框架通杀所有版本的一个SQL注入漏洞详细分析及测试方法 | Seay 渗透 编程 代码审计 网络安全博客...
- 中文乱码之myEclipse项目导入时中文乱码(待)
- 高斯克吕格投影换带计算(高斯正反算公式)
- linux下jmeter性能测试
- nodejs安装及环境配置
- NLP之句子相似度之入门篇
- foxmail发生RCPT错误
- FZU - 2301 H - Chosen by god (组合数学)
- 『前端大事记』之「几件大事」
- 基于经度坐标校正鱼眼图像---python实现
- 中国恐慌指数VIX(基于沪深300的)
- Android-通讯卫士
- Java之Csv转 Xlsx工具类
- 手动打造优盘杀毒伴侣
- APP渗透测试之反编译找API漏洞
- 微型计算机奔三奔四指的是,奔三奔四的女人别装嫩了,试试这5款法式连衣裙,知性优雅显气质...
热门文章
- Attention gated networks: Learning to leverage salient regions in medical images
- 如何把软件作为服务启动_软件作为服务
- 旷厂练习生特别企划 | 和传说中的 Basemodel 组面对面
- python中x+=y和x=x+y的区别
- 为什么在GAN中使用KL散度会出现模式坍缩的问题?
- fpga——浮点数加减法
- NFT租赁提案EIP-5006步入最后审核!让海外大型游戏的链改成为可能
- 列表、表格、表单思维导图
- Unity学习日志_动画系统简介
- web前端开发项目资源网站,私家珍藏!分享给大家