两列布局、三列适应布局、两列等高适应布局。

一. 两列布局：左侧定宽、右侧自适应。

四种方法：flex 、position、float和负外边距、外边距

1. 使用flex.

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding:0;}.main{display:flex;}.sitebar{flex:0 0 200px;order:-1;
//order属性用于更改在主轴方向上排列顺序,order数值越小，排列越靠前，默认为0，可以为负数background-color: green;}.content{flex:1;background-color: red;}</style>
</head>
<body><div class="main"><div class="content">右侧自适应区块</div><div class="sitebar">左侧定宽200px区块</div></div>
</body>
</html>

2. 使用position，考虑了页面优化，右侧区域先加载。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding:0;}.sitebar{width:200px;background-color: green;}.content{position: absolute;left: 200px;right:0;top:0;background-color: red;}        </style>
</head>
<body><div class="content">右侧自适应区块</div><div class="sitebar">左侧定宽200px区块</div>
</body>
</html>

3. 利用float和负外边距

这里的100%是相对于父元素, margin-left的意思是子元素的左边框距离父元素右边框的距离，我这里没考虑padding,border等因素哈

当设置left元素的margin-left:-100%;时，left元素的左边框会与父元素的左边框重合。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding:0;}.main {width: 100%;float:left;}.main .content {margin-left: 200px;background-color: red;}.sitebar {width: 200px;float: left;background-color: green;margin-left: -100%;}</style>
</head>
<body><div class="main"><div class="content">右侧自适应区块</div></div><div class="sitebar">左侧定宽200px</div>
</body>
</html>

二、三列布局：左右定宽，中间自适应。

圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。

三种方法：flex、绝对定位、使用负外边距。

1. flex

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">.body{display:flex;}.content{flex:1;background-color: green;}.nav, .ads{/*//设置两个侧边栏宽度*/flex:0 0 200px;background-color: blue;}.nav {/*    把导航放到最左边*/order:-1;background-color: grey;}        </style>
</head>
<body><div class="body"><main class="content">center</main><nav class="nav">left</nav><aside class="ads">right</aside>    </div></body>
</html>

2. 绝对定位

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">body {margin: 0px;}.left {background-color: red;width:100px;position: absolute;top: 0px;left:0px;}.center {background-color: grey;margin-left: 100px;margin-right: 100px;}.right {background-color: green;width:100px;position: absolute;top:0px;right:0px;}    </style>
</head>
<body><div class="center">中间</div><div class="left">左列</div><div class="right">右列</div>
</body>
</html>

三、两列等高布局。

利用padding-bottom的正值与margin-bottom的负值相互抵消即可，同时最外层设置overflow:hidden;即可

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">.main {margin: 0 auto;overflow: hidden;width: 600px;}.left {background-color: red;width:300px;float:left;padding-bottom: 2000px;margin-bottom: -2000px;}.right {background-color: green;width:300px;float:left;padding-bottom: 2000px;margin-bottom: -2000px;}    </style>
</head>
<body><div class="main"><div class="left"><p style="height:200px">left</p></div><div class="right"><p style="height:300px">right</p></div></div>
</body>
</html>

转载于:https://www.cnblogs.com/sarah-wen/p/10770419.html

两列布局、三列适应布局、两列等高适应布局。相关推荐

html怎么样做出两列布局页面,HTML+CSS实现两栏和三栏布局
三栏布局三列自适应布局通常指两边定宽,中间部分宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 基于传统的position进行布局 ...
【SQL开发实战技巧】系列（三十七）：数仓报表场景☞从表内始终只有近两年的数据，要求用两列分别显示其中一年的数据聊行转列隐含信息的重要性
系列文章目录 [SQL开发实战技巧]系列(一):关于SQL不得不说的那些事 [SQL开发实战技巧]系列(二):简单单表查询 [SQL开发实战技巧]系列(三):SQL排序的那些事 [SQL开发实战技巧] ...
HTML5column属性布局页脚,利用column多列属性调整页面文字列布局
column多列属性 column-count:栏目数兼容性写法: CSS Code复制内容到剪贴板 -webkit-column-count:3 -moz-column-count:3 colum ...
html 两个时间戳相减,表格里两列时间点如何相减
EXCEL表中如何让两列时间相减两列时间,格式是常规,显示如:24时20分,如果我直接相减(比如C1=A1-B时间是特殊的数值形式,直接相减即可 Excel版本参考:2010 测试数据在A1和A2单 ...
mysql 主表某一列小于某一个表的两列之和_关于MySQL索引知识与小妙招
1.1 索引的优点大大减少了服务器需要扫描的数据量,加快数据库的检索速度帮助服务器避免排序和临时表将随机io变成顺序io 1.2 索引的用处速查找匹配WHERE子句的行从considerat ...
如何排两列的序计算机考试,excel中两列数据怎么一起排序?excel两列同时排序的方法...
excel中两列数据怎么一起排序?excel两列同时排序的方法腾讯视频/爱奇艺/优酷/外卖充值4折起我们在使用Excel对数列排序时,有时会碰到需要对两列数据同时排序,下面就跟大家详细介绍操作方 ...
LATEX——两张图并列排列/双栏模板中图片通栏并列布局
LATEX--两张图并列排列/双栏模板中图片通栏并列布局正常插入图片并列插入两张图片双栏模板中图片通栏并列布局1(不同图片使用不同标题,不同编号) 双栏模板中图片通栏并列布局2(不同图片使有不同 ...
【Pandas】对比两列取最大值生成新的一列
[Pandas]对比两列取最大值生成新的一列问题: 假设 dataframe 中有如下两列,如何生成第三列 best,其值取scheme1与scheme2 对应的最大值解决方法: df['best ...
Shell合并两个文件成一个文件的两列paste,awk
Shell合并两个文件成一个文件的两列发布时间:2014-07-20 编辑:www.jquerycn.cn Shell合并两个文件成一个文件的两列,提供了两种方法,普通shell脚本,awk脚本 ...

两列布局、三列适应布局、两列等高适应布局。

两列布局、三列适应布局、两列等高适应布局。相关推荐

最新文章

热门文章