三种方法实现CSS三栏布局
时间:2022-06-11
本文章向大家介绍三种方法实现CSS三栏布局,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果
1.方法一:自身浮动的方法
实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来撑开距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现三栏布局1</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.left{
width:200px;
height: 300px;
background-color: #DC698A;
float:left;
}
.middle{
/*width:100%;*/
/*中间栏不要设宽度,包括100%*/
height: 300px;
background-color: #8CB08B;
margin:0 200px;
}
.right{
width: 200px;
height: 300px;
background-color: #3EACDD;
float: right;
}
</style>
</head>
<body>
<!-- 左栏左浮右栏右浮,中间不设宽度用左右margin值撑开距离,且布局中中间栏放最后 -->
<!-- 中间栏实际宽度是当前屏的100% -->
<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>
</body>
</html>
注意:该方法在html布局时,要把中间栏放在左栏、右栏后面,左栏和右栏的顺序不定
实现的效果如下:
2.方法二:margin负值法
实现方法:两边两栏宽度固定,中间栏宽度自适应,左栏、右栏、中间栏向左浮动,左栏的margin-left设为-100%,中间栏的width设为100%,右栏的margin-left设为-右栏宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现三栏布局2</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
.left{
width:200px;
height: 300px;
background-color: #DC698A;
float:left;
margin-left:-100%;
}
.middle{
width:100%;
height: 300px;
background-color: #8CB08B;
float:left;
}
.right{
width:200px;
height: 300px;
background-color: #3EACDD;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<!-- 左栏中间栏右栏左浮,左栏margin-left:-100%,中间栏宽100%,,右栏margin-left:-右栏宽度
且布局上必须中间栏放第一个-->
<div class="middle">中间栏</div>
<div class="left">左栏</div>
<div class="right">右栏</div>
</body>
</html>
注意:该方法在html布局时,要把中间栏放在第一个
此方法是实现圣杯布局和双飞翼布局的基础。
实现的效果如下:
3.方法三:绝对定位法
实现方法:左栏、右栏绝对定位,分别固定到页面左右两侧,中间栏不设宽度,用左右margin来撑开距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现三栏布局3</title>
<style type="text/css">
body{
margin:0;
padding: 0;
}
.left{
width:200px;
height: 300px;
background-color: #DC698A;
position: absolute;
left:0;
top:0;
}
.middle{
/*width: 100%;*/
height: 300px;
background-color: #8CB08B;
margin:0 200px;
}
.right{
width:200px;
height: 300px;
background-color: #3EACDD;
position: absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<!-- 左右两栏绝对定位,分别固定到页面的左右两侧,中间栏不设宽度,用左右margin撑开距离 -->
<!-- 中间栏的实际宽度是当前屏的100% -->
<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>
</body>
</html>
实现的效果如下:
- python实现逻辑logistic回归:预测病马的死亡率
- 开发 | 图片数据集太少?看我七十二变,Keras Image Data Augmentation 各参数详解
- linux过滤空文件的命令总结(r2笔记40天)
- shell脚本自动化采集性能sql(r2笔记39天)
- R语言与点估计学习笔记(EM算法与Bootstrap法)
- 开发 | 为个人深度学习机器选择合适的配置
- 阿里音乐流行趋势预测竞赛数据清洗整合——纯python
- 生产环境sql语句调优实战第二篇(r2第38天)
- 生产环境sql语句调优实战第三篇(r2笔记38天)
- 简单易学的机器学习算法——K-Means算法
- 通过shell脚本定位性能sql和生成报告(r2笔记37天)
- VXFS启用异步IO导致的严重问题(r2笔记56天)
- 通过sql语句分析足彩(r2笔记55天)
- 关于验证表中有无数据的方法比较(r2笔记54天)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 剑指Offer LeetCode 面试题21. 调整数组顺序使奇数位于偶数前面
- 剑指Offer LeetCode 面试题17. 打印从1到最大的n位数
- 剑指Offer LeetCode 面试题15. 二进制中1的个数
- 剑指Offer LeetCode 面试题11. 旋转数组的最小数字
- 剑指Offer 面试题09. 用两个栈实现队列
- 剑指Offer 面试题06. 从尾到头打印链表
- 剑指Offre 面试题05. 替换空格
- Datatables获取选中行的某一列的数据
- 终于懂了建造者模式
- (力扣)面试题04. 二维数组中的查找
- 一条命令查询电脑多久没关机
- Android Studio无法运行程序调试程序出现Unable to connect to ADB.Check the Event Log for possible issues.Verify th
- MySQL 中的 DML 语句执行流程,你理解的跟我一样吗?
- Android SharedPreferences的使用
- 【DB笔试面试846】在Oracle中,TWO_TASK环境变量的作用是什么?