两栏布局,左边定宽200px,右边自适应。如何实现?
我的第一个反应就是:用flex伸缩盒呀,然后balabala...
说完之后,面试官说,还有没有别的方法?flex有些浏览器不支持
嗯...我愣了一下,平常遇到这种问题貌似都是这么写的...
别的方法?我又想了想。JS?对,JS肯定可以。
然后就说,可以用JS获取当前窗口宽度,然后减去200px就是右边的宽度了
面试官:嗯,这样的确可以,但是布局一般不要用JS,还有没有别的方法?CSS的
额,这下我完全愣住了好嘛,人也变得有些紧张。还要别的方法啊,什么方法呢???
哎呀妈呀,想不出来,肿么办...
然后面试官看了我半天,十分体谅的说,那我们进行下一个问题吧...
(以上面试官原话记不大请了,但是意思就是这样~)

回来后,经过百度,哇!原来方法如此之多~还如此简单~
下面就来总结一下~


一、两栏布局(左定宽,右自动)
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。
举例:
HTML代码:

  1. <div class="wrap">
  2. <div class="wrap_left">
  3. 我是左栏
  4. </div>
  5. <div class="wrap_right">
  6. 我是右栏
  7. </div>
  8. </div>

复制代码

CSS代码

  1. html,body,div{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .wrap{
  6. margin: 10px;
  7. }
  8. .wrap_left{
  9. float: left;
  10. width: 200px;
  11. background-color: red;
  12. }
  13. .wrap_right{
  14. margin-left: 220px;
  15. background-color: green;
  16. }

复制代码

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com

2.position + margin
即在父标签设置position属性为relative;子标签中定宽元素设置position属性为absolute;自适应元素设置margin属性,margin-left>=定宽元素宽度。
举例:
HTML代码

  1. <div class="wrap">
  2. <div class="wrap_left">
  3. 我是左栏
  4. </div>
  5. <div class="wrap_right">
  6. 我是右栏
  7. </div>
  8. </div>

复制代码

CSS代码

  1. html,body,div{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .wrap{
  6. margin: 10px;
  7. position: relative;
  8. }
  9. .wrap_left{
  10. position: absolute;
  11. width: 200px;
  12. background-color: red;
  13. }
  14. .wrap_right{
  15. margin-left: 220px;
  16. background-color: green;
  17. }

复制代码

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com

3.float + 负margin
即给自适应宽度元素定义一个父标签,并设置float属性为left;width为100%;自适应宽度元素设置margin,margin-left应>=定宽元素宽度;
固定宽度元素设置margin-left属性为负值:-100%;
除此之外应注意HTML结构中应先写自适应元素,再写固定宽度元素。
举例:
HTML代码

  1. <div class="wrap">
  2. <div class="wrap_right">
  3. 我是右栏
  4. </div>
  5. </div>
  6. <div class="wrap_left">
  7. 我是左栏
  8. </div>

复制代码

CSS代码

  1. html,body,div{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .wrap{
  6. float: left;
  7. width: 100%;
  8. }
  9. .wrap .wrap_right{
  10. margin-left: 220px;
  11. background-color: green;
  12. }
  13. .wrap_left{
  14. float: left;
  15. width: 200px;
  16. margin-left: -100%;
  17. background-color: red;
  18. }

复制代码

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com

注:使用的float属性,必要时清除一下浮动。

4.用table布局实现
来自评论里@qazxsw的方法:

  1. <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
  2. <tr>
  3. <td width="200" bgcolor="red"></td>
  4. <td bgcolor="green"></td>
  5. </tr>
  6. </table>

复制代码

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com

不过这个方法,一定要设置高度才可以~

5.触发BFC实现   —— 来自评论里柯南同学@15913127081的方法
关于BFC是什么、怎么触发BFC以及BFC可以用来做什么,大家可以看看这篇,前端精选文摘:BFC 神奇背后的原理(我会告诉你我也是才看的么~哈哈~)
实现方法,即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。(可以触发BFC的属性?继续看上面那个链接!!)
示例:
HTML代码:

  1. <div class="wrap_left">
  2. 我是左栏
  3. </div>
  4. <div class="wrap_right">
  5. 我是右栏
  6. </div>

复制代码

CSS代码:

  1. html,body,div{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .wrap_left{
  6. float: left;
  7. width: 200px;
  8. background-color: red;
  9. }
  10. .wrap_right{
  11. overflow: hidden;
  12. background-color: green;
  13. }

复制代码

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com

前面有说到一般我都是用的flex伸缩盒,那也来说一下用flex怎么实现的吧
6.flex伸缩盒方法
即父标签设置display:flex属性,自适应元素设置flex-grow:1;
HTML代码

  1. <div class="wrap">
  2. <div class="wrap_left">
  3. 我是左栏
  4. </div>
  5. <div class="wrap_right">
  6. 我是右栏
  7. </div>
  8. </div>

复制代码

CSS代码

  1. html,body,div{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .wrap{
  6. display: flex;
  7. display: -webkit-flex;
  8. }
  9. .wrap_left{
  10. width: 200px;
  11. background-color: red;
  12. }
  13. .wrap_right{
  14. flex-grow:1;
  15. -webkit-flex-grow:1;
  16. background-color: green;
  17. }

复制代码

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com

进阶
二、三栏布局
掌握了上面的方法,我们会发现制作一个三栏布局也是非常容易的。
下面我们在上面栗子的基础上,看看实现一个两侧定宽,中间自适应的三栏布局如何实现
1. float + margin(两侧定宽,中间自适应)
HTML代码:

  1. <div class="wrap_left">
  2. 我是左栏
  3. </div>
  4. <div class="wrap_right">
  5. 我是右栏
  6. </div>
  7. <div class="wrap_content">
  8. 我是中间栏
  9. </div>

复制代码

CSS代码:

  1. html,body,div{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .wrap_left{
  6. width: 200px;
  7. float: left;
  8. background-color: red;
  9. }
  10. .wrap_content{
  11. margin-left: 220px;
  12. margin-right: 220px;
  13. background-color: yellow;
  14. }
  15. .wrap_right{
  16. width: 200px;
  17. float: right;
  18. background-color: green;
  19. }

复制代码

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com

2. position + margin(两侧定宽,中间自适应)
HTML代码:

  1. <div class="wrap_left">
  2. 我是左栏
  3. </div>
  4. <div class="wrap_right">
  5. 我是右栏
  6. </div>
  7. <div class="wrap_content">
  8. 我是中间栏
  9. </div>

复制代码

CSS代码

  1. html,body,div{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .wrap_left{
  6. width: 200px;
  7. position: absolute;
  8. background-color: red;
  9. left: 0;
  10. }
  11. .wrap_content{
  12. margin-left: 220px;
  13. margin-right: 220px;
  14. background-color: yellow;
  15. }
  16. .wrap_right{
  17. width: 200px;
  18. position: absolute;
  19. right: 0;
  20. background-color: green;
  21. }

复制代码

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com

3.float + 负margin(两侧定宽,中间自适应)
HTML代码

  1. <div class="wrap">
  2. <div class="wrap_content">
  3. 我是中间栏
  4. </div>
  5. </div>
  6. <div class="wrap_left">
  7. 我是左栏
  8. </div>
  9. <div class="wrap_right">
  10. 我是右栏
  11. </div>

复制代码

CSS代码

  1. html,body,div{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .wrap{
  6. float: left;;
  7. width: 100%;
  8. }
  9. .wrap_left{
  10. width: 200px;
  11. float: left;
  12. margin-left: -100%;
  13. background-color: red;
  14. }
  15. .wrap_content{
  16. margin-left: 220px;
  17. margin-right: 220px;
  18. background-color: yellow;
  19. }
  20. .wrap_right{
  21. width: 200px;
  22. float: left;
  23. margin-left: -200px;
  24. background-color: green;
  25. }

复制代码

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com

4.table实现

  1. <table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
  2. <tr>
  3. <td width="200" bgcolor="red"></td>
  4. <td bgcolor="yellow"></td>
  5. <td width="200" bgcolor="green"></td>
  6. </tr>
  7. </table>

复制代码

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com

5.BFC方法
HTML代码

  1. <div class="wrap_left">
  2. 我是左栏
  3. </div>
  4. <div class="wrap_right">
  5. 我是右栏
  6. </div>
  7. <div class="wrap_content">
  8. 我是中间栏
  9. </div>

复制代码

CSS代码

  1. html,body,div{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .wrap_left{
  6. float: left;
  7. width: 200px;
  8. background-color: red;
  9. }
  10. .wrap_right{
  11. float: right;
  12. width: 200px;
  13. background-color: green;
  14. }
  15. .wrap_content{
  16. overflow: hidden;
  17. background-color: yellow;
  18. }

复制代码

运行代码复制代码保存代码提示:您可以先修改部分代码再运行!power by W3Cfuns.com

注:HTML中先写定宽元素,再写自适应宽度元素。

6.flex伸缩盒
即父标签设置display:flex属性,自适应元素设置flex-grow:1;
HTML代码

  1. <div class="wrap">
  2. <div class="wrap_left">
  3. 我是左栏
  4. </div>
  5. <div class="wrap_content">
  6. 我是中间栏
  7. </div>
  8. <div class="wrap_right">
  9. 我是右栏
  10. </div>
  11. </div>

复制代码

CSS代码

  1. html,body,div{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .wrap{
  6. display: flex;
  7. display: -webkit-flex;
  8. }
  9. .wrap_left{
  10. width: 200px;
  11. background-color: red;
  12. }
  13. .wrap_right{
  14. width: 200px;
  15. background-color: green;
  16. }
  17. .wrap_content{
  18. flex-grow:1;
  19. -webkit-flex-grow:1;
  20. background-color: yellow;
  21. }

复制代码

DIV+CSS 自适应布局的更多相关文章

  1. DIV+CSS自适应布局

    自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒. 效果图如下:高度自适应——宽度自适应            1,高度自适应 ...

  2. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  3. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  4. DIV+CSS自适应窗口高度

    <html> <head> <title>DIV+CSS自适应窗口高度</title> <style type="text/css&qu ...

  5. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

  6. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  7. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  8. CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

    1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...

  9. [css] 自适应布局 移动端自适应

    一.宽度自适应 三列布局左右固定.中间不固定或者两列布局,左边固定右边不固定 原文链接:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.h ...

随机推荐

  1. Asp.net简单实现forms验证

    <configuration> <system.web> <compilation debug="true" targetFramework=&quo ...

  2. 关于ajax网络请求的封装

    // 封装的ajax网络请求函数// obj 是一个对象function AJAX(obj){ //跨域请求        if (obj.dataType == "jsonp") ...

  3. ASP.net 前台页面通过ID获取控件

    asp.net的服务器控件的ID通常只能在服务器端很好的识别,客户端需要通过ClientID获得控件 1.通过js获得   var controlID = "<%=controlID. ...

  4. ORACLE的order by中文排序

    在使用order by排序的时候,出现如下情况:   印象中中文排序应该默认是按照拼音排序的,为何"鑫"会排在"中"的后面呢?猜想order by是不是根据对应 ...

  5. java多线层同时运行的解决,同步代码块synchronized

    /* 多个线层同时操作一个数据 会导制数据超出 同步代码块 synchronized(对像) { 需要同步的代码 } */ class Do7 { public static void main(St ...

  6. hdu 4277 USACO ORZ (暴力+set容器判重)

    USACO ORZ Time Limit: 5000/1500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  7. MySQL学习笔记(1) - cmd登陆和退出

    1. 打开cmd,输入,回车 mysql -uroot -p -P3306 -h127. 1)-u :指定用户名,root为超级权限用户. 2)-p :输入密码,不指定时回车后会提示输入密码,并用*号 ...

  8. powerdesigner设置mysql唯一键,非主键

    员工表如下,先将id设置主键: 现在将"员工id"设置唯一约束: 1,切换到"Keys",发现已经存在一个Key1,这个是刚刚新增主键id.在Key1下发空行出 ...

  9. C++ 知识点1

    typedef的陷阱 严格来说typedef并不是定义别名,而是定义类型,比如typedef int a;按照大部分书本说来,就是把a看做int,这种说法初学看来是正确的,也易于理解,但是遇到type ...

  10. jquery1.9学习笔记 之层级选择器(二)

    子孙选择器(“祖先 子孙”) 描述:选择所有给出祖先选择器的子孙选择器. 例子: 用蓝色虚线边框标记所有表单子孙元素的输入.表单里的输入框用黄色背景. <!doctype html>< ...