CSS实现三列布局
三列布局指的是两边两列定宽，中间的宽度自适应。
常用三种方法：
- 定位
- 浮动
- 弹性盒布局
定位方式
最直观和容易理解的一种方法，左右两栏选择绝对定位，固定于页面的两侧，中间的主体选择用margin确定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位方法创建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
position: absolute; /* 绝对定位，使位置固定 */
left: 0;
top: 0;
}
.center{
height: 600px;
background-color: purple;
margin: 0 300px 0 200px; /* 通过外边距确定宽度 */
}
.right{
width: 300px;
height: 500px;
background-color: red;
position: absolute; /* 绝对定位，使位置固定 */
right: 0;
top: 0;
} </style>
</head>
<body>
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</body>
</html>
结果
浮动方法
让左右两边部分浮动，脱离文档流后对中间部分使用margin来自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动法创建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
float: left;
}
.center{
height: 600px;
background-color: purple;
margin: 0 300px 0 200px;
min-width: 100px; /* 最小宽度，防止浏览器缩小后中间部分被隐藏 */
}
.right{
width: 300px;
height: 500px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div> <!-- 左右部分脱离文档流，中间部分平铺 -->
</body>
</html>
弹性盒布局
使用容器包裹三栏，并将容器的display设置为flex，左右两部分宽度设置为固定，中间flex设置为1，左右两边的值固定，所以中间的自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子创建三列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
}
.left{
width: 200px;
height: 500px;
background-color: yellow;
}
.center{
height: 600px;
flex: 1;
background-color: purple;
}
.right{
width: 300px;
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</div>
</body>
</html>
CSS实现三列布局的更多相关文章
- css实现三列布局，左右固定值，中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- HTML5+CSS实现三列布局自适应
利用CSS的float属性可以将元素并排,做出三列并排的布局. 如这样的效果 实现的原理:只要将3个元素设置float属性,属性值为left,同时指定不同比例的宽度,及高度. 下面是实现代码 < ...
- CSS 经典三列布局
一 圣杯布局 1 html结构 <!DOCTYPE html> <html> <head> <title></title> <link ...
- CSS实现三列布局方法总结
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl
- 纯CSS实现三列布局(两边固定，中间自适应)
看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.＝＝ 看代码: html: <div class="top&qu ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- 三列布局，读《css那些事儿》
1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
- css三列布局之双飞翼pk圣杯
三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...
随机推荐
- 剑指offer-学习笔记
前言:18/06/06开始学习,每个程序都会用C写一遍,因书中用C++举例,也会换种思路写,供学习和参考!!!很推荐这本书很不错,准备入手,一般不买实体书,都用电子书,因一般都看一遍,但这本会看很多遍 ...
- 搭建 MobileNet-SSD 开发环境并使用 VOC 数据集训练 TensorFlow 模型
原文地址:搭建 MobileNet-SSD 开发环境并使用 VOC 数据集训练 TensorFlow 模型 0x00 环境 OS: Ubuntu 1810 x64 Anaconda: 4.6.12 P ...
- python 时间模块time，datetime
模块(module)是 Python 中非常重要的东西,你可以把它理解为 Python 的扩展工具.换言之,Python 默认情况下提供了一些可用的东西,但是这些默认情况下提供的还远远不能满足编程实践 ...
- H5调取APP或跳转至下载
来源: 最近在配合移动端做几个详情页h5分享页面,需要调取App并跳转至app详情页, 如果没有安装App,需要判断引导至下载页面. 参考文档: https://juejin.im/post/5b7e ...
- 【译】微型ORM：PetaPoco
PetaPoco是一款适用于.Net 和Mono的微小.快速.单文件的微型ORM. PetaPoco有以下特色: 微小,没有依赖项……单个的C#文件可以方便的添加到任何项目中. 工作于严格的没有装饰的 ...
- IdentityServer4客户端JWT解密实现（基于.net4.0）
情景:公司项目基于.net4.0,web客户端实现单点登录需要自己解密id_token,对于jwt解密,.net提供了IdentityModel类库,但是4.0中该类库不可用,所以自己实现了解密方法. ...
- C#常量和字段以及各种方法的语法总结
目录 一. 常量和字段.... 1 1. 常量.... 1 2.字段.... 1 二.方法.... 2 1.实例构造器和类(引用类型).... 2 2.实例构造器和结构(值类型).... 2 3.类型 ...
- EF 事务（转载）
事务简单用法 文章一:https://www.cnblogs.com/wujingtao/p/5407821.html 1EF事务 事务就是确保一次数据库操作,所有步骤都成功,如果哪一步出错了,整个操 ...
- 慢查询日志工具mysqlsla的使用
安装mysqlsla源码路径:https://github.com/daniel-nichter/hackmysql.com源码存放路径:/usr/local/src1.获取源码如果没有git命令,请 ...
- (9)Microsoft office Word 2013版本操作入门_文本框_word排版
1.插入文本框 :[插入]---[文本框]可以自己画,也可以选择已有的模板 2.文本框设置 :点中文本框选择[格式]---[对齐文本]可以让文字上下居中,[形状填充]填充不同的颜色.[形状轮廓]可以改 ...