[转]css实现左侧宽度自适应,右侧固定宽度
原文地址:https://segmentfault.com/a/1190000008411418
页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应。总之就是一边固定宽度,一边自适应宽度。
一般固定宽度是导航栏,自适应宽度的是主体内容显示区。
所以要实现这种布局,就先给出如下html结构:
<div class="container">
<div class="sidebar">导航区域</div>
<div class="main">主体内容显示区域</div>
</div>
<div class="footer">footer保证前面的不会影响此元素的显示</div>
container用于包裹sidebar与main,footer用来测试前面的布局不会影响footer的正常显示,如果footer样式不对,说明我们的布局是有问题的。
接下来看常见的几种布局方法:
四种布局:
固定区域浮动,自适应区域不设置宽度但设置margin
.container {
overflow: hidden;
*zoom: 1;
}
.sidebar {
float: right;
width: 300px;
background: #333;
}
.main {
margin-right: 320px;
background: #666;
}
.footer {
margin-top: 20px;
background: #ccc;
}
其中,sidebar让它浮动,并设置了一个宽度;而main没有设置宽度。
大家要注意html中必须使用div标签,不要妄图使用什么p标签来达到目的。因为div有个默认属性,即如果不设置宽度,那它会自动填满它的父标签的宽度。这里的main就是例子。
当然我们不能让它填满了,填满了它就不能和sidebar保持同一行了。我们给它设置一个margin。由于sidebar在右边,所以我们设置main的margin-right值,值比sidebar的宽度大一点点——以便区分它们的范围,例子中是320。
假设main的默认宽度是100%,那么它设置了margin后,它的宽度就变成了100%-320,此时main发现自己的宽度可以与sidebar挤在同一行了,于是它就上来了。
而宽度100%是相对于它的父标签来的,如果我们改变了它父标签的宽度,那main的宽度也就会变——比如我们把浏览器窗口缩小,那container的宽度就会变小,而main的宽度也就变小,但它的实际宽度100%-320始终是不会变的。
这个方法看起来很完美,只要我们记得清除浮动(这里我用了最简单的方法),那footer也不会错位。而且无论main和sidebar谁更长,都不会对布局造成影响。
但实际上这个方法有个很老火的限制——html中sidebar必须在main之前!
但我需要sidebar在main之后!因为我的main里面才是网页的主要内容,我不想主要内容反而排在次要内容后面。
但如果sidebar在main之后,那上面的一切都会化为泡影。
可能有的人不理解,说你干嘛非要sidebar在后面呢?这个问题说来话长,反正问题就是——main必须在sidebar之前,但main宽度要自适应,怎么办?
下面有两个办法,不过我们先把html结构改成我们想要的样子:
<div class="container">
<div class="main">主体内容显示区域</div>
<div class="sidebar">导航区域</div>
</div>
固定区域使用定位,自适应区域不设置宽度但设置margin
我们把sidebar扔掉,只对main设置margin,那么我们会发现main的宽度就已经变成自适应了——于是main对sidebar说,我的宽度,与你无关。
main很容易就搞定了,此时来看看sidebar,它迫不得已抛弃了float。我们来看看sidebar的特点:在右边,宽度300,它的定位对main不影响——很明显,一个绝对主义分子诞生了。
于是我们的css如下:
.container {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
right: 0;
width: 300px;
background: #333;
}
.main {
margin-right: 320px;
background: #666;
}
这段css中要注意给container加上了相对定位,以免sidebar太绝对了跑到整个网页的右上角而不是cintainer的右上角。
好像完成了?在没有看footer的表现时,我很欣慰。我们来把sidebar加长100px。
咦,好像不对,footer怎么还是在那儿呢?怎么没有自动往下走呢?footer说——我不给绝对主义者让位!
其实这与footer无关,而是因为container对sidebar的无视造成的——你再长,我还是没感觉。
看来这种定位方式只能满足sidebar自己,但对它的兄弟们却毫无益处。
float与margin齐上阵
经过前面的教训,我们重新确立了这个自适应宽度布局必须要达成的条件:
1.sidebar宽度固定,main宽度自适应
2.main要在sidebar之前
3.后面的元素要能正常显示,不能受影响
由于绝对定位会让其他元素无视它的存在,所以绝对定位的方式必须抛弃。
如果main和sidebar一样,都用float,那main的自适应宽度就没戏了;如果不给main加float,那sidebar又会跑到下一行去。
所以,最终我决定:float与margin都用。
我打算把main的宽度设为100%,然后设置float:left,最后把它向左移动320,以便于sidebar能挤上来。
但这么一来main里面的内容也会跟着左移320像素,导致被遮住了,所以我们要把它重新挤出来。为了好挤,我用了一个额外的div包裹住内容,所以html结构变成了这种样子:
<div class="container">
<div class="main">
<div class="main_container">主体内容显示区域</div>
</div>
<div class="sidebar">导航区域</div>
</div>
css则变成这样:
.main {
float: left;
width: 100%;
margin-left: -320px;
}
.main_container {
margin-left: 320px;
}
.sidebar {
float: right;
width: 300px;
}
这样一改,真正的“main”就变成了main_container,它的宽度跟以前的main一样,是100%-320。
大家可能注意到了代码中的两个margin-left,一个-320px一个320px,最后结合起来相当于什么都没干,着实蛋疼。但它确实解决了main与sidebar的顺序问题。
这个方法的缺点就是:太怪异,以及额外多了一层div。
标准浏览器的方法:
当然,以不折腾人为标准的w3c标准早就为我们提供了制作这种自适应宽度的标准方法。那就简单了:把container设为display:table并指定宽度100%,然后把main+sidebar设为display:table-cell;然后只给sidebar指定一个宽度,那么main的宽度就变成自适应了。
.container {
display: table;
width: 100%;
}
.main {
display: table-cell;
}
.sidebar {
display: table-cell;
width: 300px;
}
代码很少,而且不会有额外标签。不过这是IE7都无效的方法。
如果不考虑ie7及以下版本,则使用标准方法;如果不在意sidebar与main的顺序,则用第一种方法;否则用第3种方法。
以上代码都没在IE6测试,有问题不负责解释。个人觉得,让IE6寿终正寝的办法就是——从此不再理它。
参考文章:http://jo2.org/css-auto-adapt...
[转]css实现左侧宽度自适应,右侧固定宽度的更多相关文章
- 最简单的css实现页面宽度自适应
<div class="rxs"> <div class="rxleft"> 第一段内容,可以是任何html标签 </div> ...
- 老生长谈:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- 老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- css实现右侧固定宽度,左侧宽度自适应
https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...
- 如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- CSS 实现左侧固定,右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
- css回顾之左侧宽度自适应布局
目标: <!DOCTYPE html> <meta charset=utf-8> <html> <head> <title>alibaba& ...
- CSS实现两列布局,一列固定宽度,一列宽度自适应方法
不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap& ...
- CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
随机推荐
- Angular 个人深究(五)【外部包引用 Leaflet 简单实用】
Leaflet 使用 最近在Angular项目中,用到了地图,由于种种原因放弃了百度地图api使用,最后选择了leaflet,简单介绍一下. 介绍: Leaflet 是一个为移动设备设计的交互式地图的 ...
- Spring框架学习08——自动代理方式实现AOP
在传统的基于代理类的AOP实现中,每个代理都是通过ProxyFactoryBean织入切面代理,在实际开发中,非常多的Bean每个都配置ProxyFactoryBean开发维护量巨大.解决方案:自动创 ...
- 【RAY TRACING THE REST OF YOUR LIFE 超详解】 光线追踪 3-7 混合概率密度
Preface 注:鉴于很多网站随意爬取数据,可能导致内容残缺以及引用失效等问题,影响阅读,请认准原创网址: https://www.cnblogs.com/lv-anchoret/category ...
- POJ.3145.Common Substrings(后缀数组 倍增 单调栈)
题目链接 \(Description\) 求两个字符串长度不小于k的公共子串对数. \(Solution\) 求出ht[]后先减去k,这样对于两个后缀A',B',它们之间的贡献为min{ht(A)}( ...
- Python解释数学系列——分位数Quantile
跳转到我的博客 1. 分位数计算案例与Python代码 案例1 Ex1: Given a data = [6, 47, 49, 15, 42, 41, 7, 39, 43, 40, 36],求Q1, ...
- 28BYJ-48步进电机
28BYJ-48步进电机:1.步进电机是一种将电脉冲转化为角位移的执行机构. 2.通俗一点讲:当步进驱动器接收到 一个脉冲信号,它就驱动步进电机按设定的方向转动一个固定的角度(及步进角). 3.通过控 ...
- Cocos2dx使用TextField实现输入框
游戏login的时候必须要求玩家输入用户名.密码,还要可以删除. cocostudio画一个textfield,直接读入好了: textField类,继承读取的widget. local textFi ...
- Python初识及变量
第一句python,输出 Hello world #!/usr/bin/evn python #指定解释器 #_*_ coding:utf- _*_ #指定编码 print("hello w ...
- __NSCFNumber isEqualToString:]: unrecognized selector sent to instance 0xb000000000000003
出现这个报错的原因是:拿数字与字符串进行对比了. 检查两边的数据格式是否一致 如果不一致,可以使用[nsstring stringwithformate:@"%d",xx]包装一下 ...
- javascript中的LHS与RHS
最近在学习javascript过程中,接触了LHS与RHS的概念,刚开始的时候有点理解不清,现在做一些梳理,方便以后进行理解. LHS与RHS:javascript引擎的两种查找类型,含义是赋值操作的 ...