DIV+CSS 自适应布局
两栏布局,左边定宽200px,右边自适应。如何实现?
我的第一个反应就是:用flex伸缩盒呀,然后balabala...
说完之后,面试官说,还有没有别的方法?flex有些浏览器不支持
嗯...我愣了一下,平常遇到这种问题貌似都是这么写的...
别的方法?我又想了想。JS?对,JS肯定可以。
然后就说,可以用JS获取当前窗口宽度,然后减去200px就是右边的宽度了
面试官:嗯,这样的确可以,但是布局一般不要用JS,还有没有别的方法?CSS的
额,这下我完全愣住了好嘛,人也变得有些紧张。还要别的方法啊,什么方法呢???
哎呀妈呀,想不出来,肿么办...
然后面试官看了我半天,十分体谅的说,那我们进行下一个问题吧...
(以上面试官原话记不大请了,但是意思就是这样~)
回来后,经过百度,哇!原来方法如此之多~还如此简单~
下面就来总结一下~
一、两栏布局(左定宽,右自动)
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。
举例:
HTML代码:
- <div class="wrap">
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
- </div>
复制代码
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- margin: 10px;
- }
- .wrap_left{
- float: left;
- width: 200px;
- background-color: red;
- }
- .wrap_right{
- margin-left: 220px;
- background-color: green;
- }
复制代码
2.position + margin
即在父标签设置position属性为relative;子标签中定宽元素设置position属性为absolute;自适应元素设置margin属性,margin-left>=定宽元素宽度。
举例:
HTML代码
- <div class="wrap">
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
- </div>
复制代码
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- margin: 10px;
- position: relative;
- }
- .wrap_left{
- position: absolute;
- width: 200px;
- background-color: red;
- }
- .wrap_right{
- margin-left: 220px;
- background-color: green;
- }
复制代码
3.float + 负margin
即给自适应宽度元素定义一个父标签,并设置float属性为left;width为100%;自适应宽度元素设置margin,margin-left应>=定宽元素宽度;
固定宽度元素设置margin-left属性为负值:-100%;
除此之外应注意HTML结构中应先写自适应元素,再写固定宽度元素。
举例:
HTML代码
- <div class="wrap">
- <div class="wrap_right">
- 我是右栏
- </div>
- </div>
- <div class="wrap_left">
- 我是左栏
- </div>
复制代码
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- float: left;
- width: 100%;
- }
- .wrap .wrap_right{
- margin-left: 220px;
- background-color: green;
- }
- .wrap_left{
- float: left;
- width: 200px;
- margin-left: -100%;
- background-color: red;
- }
复制代码
注:使用的float属性,必要时清除一下浮动。
4.用table布局实现
来自评论里@qazxsw的方法:
- <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
- <tr>
- <td width="200" bgcolor="red"></td>
- <td bgcolor="green"></td>
- </tr>
- </table>
复制代码
不过这个方法,一定要设置高度才可以~
5.触发BFC实现 —— 来自评论里柯南同学@15913127081的方法
关于BFC是什么、怎么触发BFC以及BFC可以用来做什么,大家可以看看这篇,前端精选文摘:BFC 神奇背后的原理(我会告诉你我也是才看的么~哈哈~)
实现方法,即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。(可以触发BFC的属性?继续看上面那个链接!!)
示例:
HTML代码:
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
复制代码
CSS代码:
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap_left{
- float: left;
- width: 200px;
- background-color: red;
- }
- .wrap_right{
- overflow: hidden;
- background-color: green;
- }
复制代码
前面有说到一般我都是用的flex伸缩盒,那也来说一下用flex怎么实现的吧
6.flex伸缩盒方法
即父标签设置display:flex属性,自适应元素设置flex-grow:1;
HTML代码
- <div class="wrap">
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
- </div>
复制代码
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- display: flex;
- display: -webkit-flex;
- }
- .wrap_left{
- width: 200px;
- background-color: red;
- }
- .wrap_right{
- flex-grow:1;
- -webkit-flex-grow:1;
- background-color: green;
- }
复制代码
进阶
二、三栏布局
掌握了上面的方法,我们会发现制作一个三栏布局也是非常容易的。
下面我们在上面栗子的基础上,看看实现一个两侧定宽,中间自适应的三栏布局如何实现
1. float + margin(两侧定宽,中间自适应)
HTML代码:
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
- <div class="wrap_content">
- 我是中间栏
- </div>
复制代码
CSS代码:
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap_left{
- width: 200px;
- float: left;
- background-color: red;
- }
- .wrap_content{
- margin-left: 220px;
- margin-right: 220px;
- background-color: yellow;
- }
- .wrap_right{
- width: 200px;
- float: right;
- background-color: green;
- }
复制代码
2. position + margin(两侧定宽,中间自适应)
HTML代码:
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
- <div class="wrap_content">
- 我是中间栏
- </div>
复制代码
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap_left{
- width: 200px;
- position: absolute;
- background-color: red;
- left: 0;
- }
- .wrap_content{
- margin-left: 220px;
- margin-right: 220px;
- background-color: yellow;
- }
- .wrap_right{
- width: 200px;
- position: absolute;
- right: 0;
- background-color: green;
- }
复制代码
3.float + 负margin(两侧定宽,中间自适应)
HTML代码
- <div class="wrap">
- <div class="wrap_content">
- 我是中间栏
- </div>
- </div>
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
复制代码
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- float: left;;
- width: 100%;
- }
- .wrap_left{
- width: 200px;
- float: left;
- margin-left: -100%;
- background-color: red;
- }
- .wrap_content{
- margin-left: 220px;
- margin-right: 220px;
- background-color: yellow;
- }
- .wrap_right{
- width: 200px;
- float: left;
- margin-left: -200px;
- background-color: green;
- }
复制代码
4.table实现
- <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
- <tr>
- <td width="200" bgcolor="red"></td>
- <td bgcolor="yellow"></td>
- <td width="200" bgcolor="green"></td>
- </tr>
- </table>
复制代码
5.BFC方法
HTML代码
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
- <div class="wrap_content">
- 我是中间栏
- </div>
复制代码
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap_left{
- float: left;
- width: 200px;
- background-color: red;
- }
- .wrap_right{
- float: right;
- width: 200px;
- background-color: green;
- }
- .wrap_content{
- overflow: hidden;
- background-color: yellow;
- }
复制代码
注:HTML中先写定宽元素,再写自适应宽度元素。
6.flex伸缩盒
即父标签设置display:flex属性,自适应元素设置flex-grow:1;
HTML代码
- <div class="wrap">
- <div class="wrap_left">
- 我是左栏
- </div>
- <div class="wrap_content">
- 我是中间栏
- </div>
- <div class="wrap_right">
- 我是右栏
- </div>
- </div>
复制代码
CSS代码
- html,body,div{
- margin: 0;
- padding: 0;
- }
- .wrap{
- display: flex;
- display: -webkit-flex;
- }
- .wrap_left{
- width: 200px;
- background-color: red;
- }
- .wrap_right{
- width: 200px;
- background-color: green;
- }
- .wrap_content{
- flex-grow:1;
- -webkit-flex-grow:1;
- background-color: yellow;
- }
复制代码
DIV+CSS 自适应布局的更多相关文章
- DIV+CSS自适应布局
自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应 1,高度自适应 ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- DIV+CSS自适应窗口高度
<html> <head> <title>DIV+CSS自适应窗口高度</title> <style type="text/css&qu ...
- div,css&table布局有哪些区别
DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...
- 这可能是史上最全的CSS自适应布局总结教程
标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)
1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...
- [css] 自适应布局 移动端自适应
一.宽度自适应 三列布局左右固定.中间不固定或者两列布局,左边固定右边不固定 原文链接:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.h ...
随机推荐
- plsql编程中游标的使用
游标(Cursor):用来查询数据库,获取记录集合(结果集)的指针,可以让开发者一次访问一行结果集,在每条结果集上作操作. oracle中显示使用游标一般要包含以下5个步骤: 声明一些变量以便存储从游 ...
- UIButton上图片和文字的位置调整
UIButton 上默认是图片在左文字在右,而大多数情况这样默认的的显示形式都不能满足我们的需求,接下来我就这个问题分享一下我的心得. 默认情况下,不设置的效果,都是居中实现 UIButton *bu ...
- 刚安装的ios app 会带有教你功能使用的特效说明 做法
这个功能使用说明是每次app更新或者第一次安装都需要显示的.你可以给每个需要显示的说明界面设置一个BOOL变量控制它是否显示.在applicationDidFinishLaunching的函数中判断a ...
- js带箭头左右翻动控制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- AjaxPro.2.dll使用方法简介
1.添加对 AjaxPro.2.dll 的引用 2.在 webconfig 中 system.web 节点下 进行如下配置 <httpHandlers> <add verb=&quo ...
- 转载:mysql-Auto_increment值修改
转载网址:http://libo93122.blog.163.com/blog/static/1221893820125282158745/ | 2012-03-13 11:19:10 | 2012- ...
- 3月23日html(五) 格式与布局练习:360浏览器布局
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...
- bug经验
1.异常信息丢失导致定位问题困难. 2.findbugs工具 3.在某些if语句判断中return,可能会导致文件句柄无法关闭. 4.lastmodified()在win下和linux下的处理是不同的 ...
- Nokia N9开启开发者模式
最近淘宝买个二手Nokia N9,纯粹是好奇meego系统. 到手了开始折腾,官方源早关闭了,导致无法开启开发者模式,没有权限很不方便.翻了翻dospy论坛的帖子,发现了n9repomirror_0. ...
- 需要熟悉的几个调试命令:objdump/pmap/ldd/stace
最近要编译很多库,还涉及到若干进程操作,所以就把相关的命令记录下来. 一,objdump命令 该命令适用于ELF可执行文件,常用的命令如下: objdump -h xx.o : 输出ELF文件的各个段 ...