左右固定，中间自适应的三栏式布局五种写法-白红宇

左右固定，中间自适应的三栏式布局五种写法

阅读量：4669 次

发布时间：2019-06-09

本文共 1128 字，大约阅读时间需要 3 分钟。

三栏式布局是工作中常用的布局方式，三栏式布局有多种写法，作为前端开发，对布局的了解也是一项基本功，

下面是整理的五种三栏式布局的基本写法

公共样式

//清除默认样式 html *{
   padding: 0;margin:0;}//layout公共样式.layout{
   margin-top:20px;}.layout div{
   min-height: 100px;}

1. 浮动布局（浮动会是文档脱离文档流，需要清浮动）

2. 绝对定位布局（绝对定位也会脱离文档流）

3. flex布局（css3的新语法，pc兼容性问题，常用于移动端，中间被内容撑开高度时，左右两边的高度也能同中间保持一致）

4. 表格布局（中间被内容撑开高度时，左右两边的高度也能同中间保持一致）

5.网格布局（新语法，代码量少）

转载于:https://www.cnblogs.com/leiting/p/8195966.html

你可能感兴趣的文章

WWDC 2015大会到来了

查看>>

JSP 入门 HTML嵌套Java脚步显示时间

查看>>

【自爆系列】如何从整体上削弱一支队伍的技术水平

查看>>

MySQL实习训练1

查看>>

HDU 1166 敌兵布阵【线段树-点修改--计算区间和】

查看>>

Hashtable几种常用的遍历方法

查看>>

hadoop 3.0.0 alpha3 安装、配置

查看>>

在Windows Server通过MMC导入客户证书的注意事项

SpringMVC+Thymeleaf +HTML的简单框架

Expm 1_2 实现快速排序的算法,并尝试采用不同的方法实现线性的划分过程.

查看>>

Spoon新建repository的时候

查看>>

Oracle XE http端口8080的修改

查看>>

C#中，将16进制转换为有符号的10进制的方法(支持带0x标志，支持任意字符串)

查看>>

HTML5开发 Web SQL Database 本地数据库

查看>>