css页面布局之左侧定宽,右侧自适应
二列布局的特征是侧栏固定宽度,主栏自适应宽度。
三列布局的特征是两侧两列固定宽度,中间列自适应宽度。
之所以将二列布局和三列布局写在一起,是因为二列布局可以看做去掉一个侧栏的三列布局,其布局的思想有异曲同工之妙。对于传统的实现方法,主要讨论上图中前三种布局,经典的带有侧栏的二栏布局以及带有左右侧栏的三栏布局,对于flex布局,实现了上图的五种布局。
##### a. float+margin
###### 原理说明:设置两个侧栏分别向左向右浮动,中间列通过外边距给两个侧栏腾出空间,中间列的宽度根据浏览器窗口自适应。
###### DOM文档:
```
<div id="content">
<div class="sub">sub</div>
<div class="extra">extra</div>
<div class="main">main</div>
</div>
```
###### 布局步骤:
1. 对两边侧栏分别设置宽度,并对左侧栏添加左浮动,对右侧栏添加有浮动。
1. 对主面板设置左右外边距,margin-left的值为左侧栏的宽度,margin-right的值为右侧栏的宽度。
###### CSS清单:
```
.sub{
width: 100px;
float: left;
}
.extra{
width: 200px;
float: right;
}
.main{
margin-left: 100px;
margin-right: 200px;
}
```
###### 一些说明:
* 注意DOM文档的书写顺序,先写两侧栏,再写主面板,更换后则侧栏会被挤到下一列(圣杯布局和双飞翼布局都会用到)。
* 这种布局方式比较简单明了,但缺点是渲染时先渲染了侧边栏,而不是比较重要的主面板。
###### 二列的实现方法
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。
##### b. position+margin
###### 原理说明:通过绝对定位将两个侧栏固定,同样通过外边距给两个侧栏腾出空间,中间列自适应。
###### DOM文档:
```
<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>
```
###### 布局步骤:
1. 对两边侧栏分别设置宽度,设置定位方式为绝对定位。
1. 设置两侧栏的top值都为0,设置左侧栏的left值为0, 右侧栏的right值为0。
1. 对主面板设置左右外边距,margin-left的值为左侧栏的宽度,margin-right的值为右侧栏的宽度。
###### CSS清单:
```
.sub, .extra {
position: absolute;
top: 0;
width: 200px;
}
.sub {
left: 0;
}
.extra {
right: 0;
}
.main {
margin: 0 200px;
}
```
###### 一些说明:
与上一种方法相比,本种方法是通过定位来实现侧栏的位置固定。
如果中间栏含有最小宽度限制,或是含有宽度的内部元素,则浏览器窗口小到一定程度,主面板与侧栏会发生重叠。
###### 二列的实现方法
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的margin-right值,其他操作相同。反之亦然。
##### c. 圣杯布局(float + 负margin + padding + position)
###### 原理说明:
主面板设置宽度为100%,主面板与两个侧栏都设置浮动,常见为左浮动,这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来,左侧栏的负边距为100%,刚好是窗口的宽度,因此会从主面板下面的左边跑到与主面板对齐的左边,右侧栏此时浮动在主面板下面的左边,设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容,在外层设置左右padding值为左右侧栏的宽度,给侧栏腾出空间,此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的,两个侧栏并不会像我们理想中的停靠在左右两边,而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局,调整两个侧栏到相应的位置。
###### DOM文档:
```
<div id="bd">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
```
###### 布局步骤:
三者都设置向左浮动。
设置main宽度为100%,设置两侧栏的宽度。
设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。
设置main的外围的padding值给左右两个子面板留出空间。
设置两个子面板为相对定位,sub的left值为负的sub宽度,extra的right值为负的extra宽度。
###### CSS清单:
```
.main {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px;
}
#bd {
padding: 0 230px 0 190px;
}
```
###### 一些说明
DOM元素的书写顺序不得更改。
当面板的main内容部分比两边的子面板宽度小的时候,布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避免问题。
###### 二列的实现方法
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置主面板的padding-right值,其他操作相同。反之亦然。
##### d. 双飞翼布局(float + 负margin + margin)
###### 原理说明:
双飞翼布局和圣杯布局的思想有些相似,都利用了浮动和负边距,但双飞翼布局在圣杯布局上做了改进,在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言,main的margin值变化便不会影响两个侧栏,因此省掉了对两侧栏设置相对布局的步骤。
###### DOM文档:
```
<div id="main-wrap" class="column">
<div id="main">#main</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
```
布局步骤:
1. 三者都设置向左浮动。
1. 设置main-wrap宽度为100%,设置两个侧栏的宽度。
1. 设置 负边距,sub设置负左边距为100%,extra设置负左边距为负的自身宽度。
1. 设置main的margin值给左右两个子面板留出空间。
###### CSS清单:
```
.main-wrap {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
}
.main {
margin: 0 230px 0 190px;
}
```
###### 一些说明
圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局,以及对应的left和right值。
通过引入相对布局,可以实现三栏布局的各种组合,例如对右侧栏设置position: relative; left: 190px; ,可以实现sub+extra+main的布局。
###### 二列的实现方法
如果是左边带有侧栏的二栏布局,则去掉右侧栏,不要设置main-wrap的margin-right值,其他操作相同。反之亦然。
##### e. flex布局
以下是五种布局的flex布局代码:
###### DOM文档:
```
<div class="layout">
<aside class="layout__aside">侧边栏宽度固定</aside>
<div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
<div class="layout__main">主内容栏宽度自适应</div>
<aside class="layout__aside">侧边栏宽度固定</aside>
</div>
<div class="layout">
<aside class="layout__aside">左侧边栏宽度固定</aside>
<div class="layout__main">主内容栏宽度自适应</div>
<aside class="layout__aside">右侧边栏宽度固定</aside>
</div>
<div class="layout">
<aside class="layout__aside">第1个侧边栏宽度固定</aside>
<aside class="layout__aside">第2个侧边栏宽度固定</aside>
<div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
<div class="layout__main">主内容栏宽度自适应</div>
<aside class="layout__aside">第1个侧边栏宽度固定</aside>
<aside class="layout__aside">第2个侧边栏宽度固定</aside>
</div>
```
###### CSS清单
```
.layout {
display: flex;
}
.layout__main {
flex: 1;
}
.layout__aside {
width: 200px;
}
```
##### f.table布局
```
<!-- 表格布局 -->
<section class="layout table">
<style>
.layout.table .left-center-right{
width:100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格布局解决方案</h2>
1.这是三栏布局的浮动解决方案;
2.这是三栏布局的浮动解决方案;
3.这是三栏布局的浮动解决方案;
4.这是三栏布局的浮动解决方案;
5.这是三栏布局的浮动解决方案;
6.这是三栏布局的浮动解决方案;
</div>
<div class="right"></div>
</article>
</section>
```
##### g.grid布局
```
<!-- 网格布局 -->
<section class="layout grid">
<style>
.layout.grid .left-center-right{
width:100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left-center-right>div{
}
.layout.grid .left{
width: 300px;
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>网格布局解决方案</h2>
1.这是三栏布局的浮动解决方案;
2.这是三栏布局的浮动解决方案;
3.这是三栏布局的浮动解决方案;
4.这是三栏布局的浮动解决方案;
5.这是三栏布局的浮动解决方案;
6.这是三栏布局的浮动解决方案;
</div>
<div class="right"></div>
</article>
</section>
```
css页面布局之左侧定宽,右侧自适应的更多相关文章
- 请给出一个左侧定宽右侧自适应的HTML结构及样式
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- CSS基础布局--居中对齐,左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
- css左右布局,左侧固定,右侧自适应
实现布局的几种方法,见代码: <!DOCTYPE html> <html lang="cn"> <head> <meta charset= ...
- css布局--两列布局,左侧固定,右侧自适应(其中左侧要可以拖动,右侧水平滚动条)
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- css经典布局之左侧固定大小右侧自动适应
最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是 ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- CSS布局 两列布局之单列定宽,单列自适应布局思路
前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...
- CSS左侧固定宽 右侧自适应(兼容所有浏览器)
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
- table-cell完成左侧定宽,右侧定宽及左右定宽等布局
使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; f ...
随机推荐
- memcached经典问题和现象
缓存刷新时间集中问题 某个缓存失效了,导致其他节点的缓存命中率下降, 缓存中缺失的数据 去数据库查询.短时间内,会造成数据库服务器崩溃 需要将缓存失效时间离散分布在访问量比较低的时间段 multige ...
- tp5 隐藏index.php 邓士鹏
tp5 隐藏index.php ------------------------------------------------------------------------------------ ...
- ThinkPHP5上传图片并压缩为缩略图
使用thinkphp开发app后端中,需要实现一个处理上传图片队列的功能 这是个上传多图片保存并且需要对其中一张图片进行压缩的功能 (使用的html5 mui框架开发app,如果直接载入原图,app客 ...
- android 基础03 -- Intent
Android 中的 Intent 是将要执行的操作的一种抽象的描述,是一个用于Android 各个组件之间传递消息的对象. Intent 的基本用法 Intent 基本的使用方法主要有三种: 启动一 ...
- 2018/1/28 每日一学 单源最短路的SPFA算法以及其他三大最短路算法比较总结
刚刚AC的pj普及组第四题就是一种单源最短路. 我们知道当一个图存在负权边时像Dijkstra等算法便无法实现: 而Bellman-Ford算法的复杂度又过高O(V*E),SPFA算法便派上用场了. ...
- 基于 HTML5 的 3D 工控隧道案例
隧道的项目我目前是第一次接触,感觉做起来的效果还蛮赞的,所以给大家分享一下.这个隧道项目的主要内容包括:照明.风机.车道指示灯.交通信号灯.情报板.消防.火灾报警.车行横洞.风向仪.COVI.微波车检 ...
- The server's host key is not cached in the registry. You have no guarantee that the server……
使用putty中的pscp.exe ,可以通过脚本方式实现windows向linux上传文件,但pscp.exe第一次运行时必须手工输入确认信息,本文主要解决掉初次运行时的人工交互,彻底实现静默运行. ...
- maven系列--maven目录
我们在玩maven,首先就是利用maven来管理我们的项目.其实maven并不难,它无非是一种目录结构.所以在本系列开始之前,我们要细致的了解下maven的目录,其实也就是maven的约定. 约定优于 ...
- 如何修改nexus的端口号
1. Maven仓库:放置所有JAR文件(WAR,ZIP,POM等等)的地方,所有Maven项目可以从同一个Maven仓库中获取自己所需要的依赖JAR,这节省了磁盘资源. 简言之,Maven仓库能帮助 ...
- android之间传递list
Intent intent = new Intent(getActivity(), Activity_Character.class); intent.putExtra("mlTrait&q ...