css中常用的七种三栏布局技巧总结

　　三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？例如当当网首页边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。效果如下图所示：

　　下面围绕的这样的目的，即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终结果如下图：

　　红色和蓝色宽度固定，绿色宽度自适应，下面七种方法实现的最终效果跟这个差不多，可能会稍有不同。

　　方法一：流体布局（左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。）

<!DOCTYPE html>

<head>

<style>

.left {

float: left;

height: 200px;

width: 100px;

}

.right {

width: 200px;

height: 200px;

background-color: blue;

float: right;

}

.main {

margin-left: 120px;

margin-right: 220px;

height: 200px;

background-color: green;

}

</style>

</head>

<body>

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

</div>

</body>

</html>

　　方法二：BFC三栏布局（缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。）

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

	.left {

	    float: left;

	    height: 200px;

	    width: 100px;

	    margin-right: 20px;

	    background-color: red;

	}

	.right {

	    width: 200px;

	    height: 200px;

	    float: right;

	    margin-left: 20px;

	    background-color: blue;

	}

	.main {

	    height: 200px;

	    overflow: hidden;

	    background-color: green;

	}

    </style>

</head>

<body>

    <div class="container">

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

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

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

    </div>

</body>

</html>

　　方法三：双飞翼布局（利用的是浮动元素 margin 负值的应用。主体内容可以优先加载，HTML 代码结构稍微复杂点。）

<!DOCTYPE html>

<head>

<style>

.content {

float: left;

width: 100%;

}

.main {

height: 200px;

margin-left: 110px;

margin-right: 220px;

}

.left {

float: left;

height: 200px;

width: 100px;

margin-left: -100%;

background-color: red;

}

.right {

width: 200px;

height: 200px;

float: right;

margin-left: -200px;

background-color: blue;

}

</style>

</head>

<body>

</div>

</body>

</html>

　　　方法四：圣杯布局（跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。）

<!DOCTYPE html>

<head>

<style>

.container {

margin-left: 120px;

margin-right: 220px;

}

.main {

float: left;

width: 100%;

height: 300px;

}

.left {

float: left;

width: 100px;

height: 300px;

margin-left: -100%;

position: relative;

left: -120px;

background-color: blue;

}

.right {

float: left;

width: 200px;

height: 300px;

margin-left: -200px;

position: relative;

right: -220px;

background-color: green;

}

</style>

</head>

<body>

</div>

</body>

</html>

　　方法五：flex布局（简单实用，未来的趋势，需要考虑浏览器的兼容性。）

<!DOCTYPE html>

<head>

<style>

.container {

display: flex;

}

.main {

flex-grow: 1;

height: 300px;

}

.left {

order: -1;

flex: 0 1 200px;

margin-right: 20px;

height: 300px;

background-color: blue;

}

.right {

flex: 0 1 100px;

margin-left: 20px;

height: 300px;

background-color: green;

}

</style>

</head>

<body>

</div>

</body>

</html>

　　　方法六：table布局（缺点：无法设置栏间距）

<!DOCTYPE html>

<head>

<style>

.container {

display: table;

width: 100%;

}

.left, .main, .right {

display: table-cell;

}

.left {

width: 200px;

height: 300px;

}

.main {

background-color: blue;

}

.right {

width: 100px;

height: 300px;

background-color: green;

}

</style>

</head>

<body>

</div>

</body>

</html>

　　方法七：绝对定位布局（简单实用，并且主要内容可以优先加载。）

<!DOCTYPE html>

<head>

<style>

.container {

position: relative;

}

.main {

height: 400px;

margin: 0 120px;

}

.left {

position: absolute;

width: 100px;

height: 300px;

left: 0;

top: 0;

background-color: red;

}

.right {

position: absolute;

width: 100px;

height: 300px;

background-color: blue;

right: 0;

top: 0;

}

</style>

</head>

<body>

</div>

</body>

</html>

css中常用的七种三栏布局技巧总结的更多相关文章

详解 CSS 七种三栏布局技巧
作者:林东洲链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是 ...
css中常用的几种居中方法
在前端面试中,大都会问你div居中的方法: 文笔不好,就随便寥寥几句话概括了, 不过以后文笔肯定会变得更好一些的. 今天我们就细数一下几种方法: 1,使用position:absolute,设置lef ...
三种方法实现CSS三栏布局
本文由云+社区发表作者:前端林子本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...
css中，在高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应
解决方案主要有五种首先写入全局样式 <style type="text/css"> html * { margin: ; padding: ; } .layout { ...
CSS实现三栏布局(5种)
常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...
Css三栏布局自适应实现几种方法
Css三栏布局自适应实现几种方法自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...
CSS三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
CSS系列，三栏布局的四种方法
三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...
css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...

随机推荐

tomcat ider配置
xml文件配置: <servlet> <servlet-name>test1</servlet-name>//设定java文件链接的锚点 <servlet-c ...
tomcat映射java目录 sever.xml
<Valve className="org.apache.catalina.authenticator.SingleSignOn" /> --> & ...
JavaEE el表达式中三目运算符的使用
也可以通过在bean对象中写getter方法通过对象.属性进行调用
59.bouncing results
一.bouncing results成因及解决方案 bouncing results问题,两个document排序,field值相同:不同的shard上,可能排序不同:每次请求轮询路由到不同的 ...
C#学习笔记_03_运算符
03_运算符算数运算符 + - * / % ++ -- 赋值运算符 = += -= *= /= %= 关系运算符 > < >= <= == != 逻辑运算符 &:逻辑 ...
nodejs获取post请求发送的formData数据
前端post请求发送formData的类型数据时,需要服务端引入中间件body-parser,主要原因是post请求发送的数据,是在http的body里面,所以需要进行解析,否则获取不到数据(数据为空 ...
MySQL主要命令(3)
//修该数据, 不要忘了set update table_name set col_name = value where 条件 //删除数据 , 指定条件对应的数据 delete from table ...
Java-基本输入输出
Scanner sc = new Scanner(System.in); System.out.println("Please input the path:"); String ...
ionic3中使用自定义配置
新工作接触了ionic,以前没用过,只是离职前短暂接触过类似的vuex,到需要修改公司项目的时候临时差什么学什么,其中一个是自定义配置项配置是很常见的设置,之前用的thinkphp的配置很清晰,基本 ...
数据结构之---C语言实现广义表头尾链表存储表示
//广义表的头尾链表存储表示 //杨鑫 #include <stdio.h> #include <malloc.h> #include <stdlib.h> #in ...

css中常用的七种三栏布局技巧总结

css中常用的七种三栏布局技巧总结的更多相关文章

随机推荐

热门专题