css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应。
1. 绝对定位
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
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
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
body {
display: flex;
padding: ;
margin: ;
}
.left {
background: blue;
flex: 200px ;
}
.middle {
background: red;
flex: ;
}
.right {
background: green;
flex: 200px;
}
3. 双飞翼
<div class="middle">
<div class="inner">
中间
</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
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. 浮动
<div class="left">左边</div>
<div class="right">右边</div>
<div class="middle">中间</div>
.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三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
- CSS系列,三栏布局的四种方法
三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...
- CSS实现三栏布局(5种)
常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...
- 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
- 【CSS】三栏布局的经典实现
要求:自适应宽度,左右两栏固定宽度,中间栏优先加载: <!DOCTYPE html> <html> <head> <title>layout</t ...
- 三栏布局的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来 ...
随机推荐
- C#中substring ()的用法
C#中substring ()的用法:http://www.cnblogs.com/bluespace/archive/2007/12/11/782336.html
- Java_异常_06_ Unsupported major.minor version 52.0
二.参考资料 1.如何解决Unsupported major.minor version 52.0问题? 2.Unsupported major.minor version 52.0 3. Unsup ...
- 嵌套list的实例化
在LeetCode上遇到这样返回值 public class Solution { public List<List<Integer>> levelOrder(TreeNode ...
- C语言小程序(四)、杨辉三角
输入要显示的杨辉三角的行数,会打印出金字塔型的杨辉三角,不过行数太多的话,效果不太好,可以再调整一下格式控制. #include <stdio.h> #include <stdlib ...
- 【Tensorflow】Ubuntu 安装 Tensorflow gpu
安装环境:Ubuntu 16.04lts 64位,gcc5.4 1.安装Cuda 1. 下载cuda toolkit. 下载cuda8.0 地址:https://developer.nvidia.co ...
- CentOS 6.X 安装 EPEL 源
CentOS 6.X 自带的软件源可选的并不多,有时候要找到一个偏门一些的软件,用命令一搜怎么都没有源,考虑到使用软件源配合 yum 命令安装可以自动安装依赖,所以加一个新的软件源迫在眉睫. 考虑到同 ...
- 深入理解javascript中的立即执行函数
这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见,需要的朋友可以 ...
- HDOJ1073(gets 应用)
练习操作字符串的好题. #include<cstdio> #include<algorithm> #include<cstring> using namespace ...
- C语言中clock函数的使用
#include<cstdio> #include<cstdlib> #include<ctime> using namespace std; int main() ...
- windows服务和进程的区别和联系
Windows Service 是主要用于服务器环境而长期运行的应用程序, 这类程序不需要有用户界面或者任何模拟输出. 任何的用户消息通常都是记录在Windows 事件日志里.Windows Serv ...