样式:

<style type="text/css">
  html,body { height: 100%; padding: 0; margin: 0; }
  .outer { height: 100%; box-sizing: border-box ; position: relative; }
  .A { height: 100px; background: #BBE8F2; width: 200px;float: left; }
  .B { height: 100px; background: #D9C666; overflow: hidden;}
</style>

 html:

<div class="outer">
<div class="A"> 左边DIV </div>
<div class="B">右边DIV </div>
</div>

 

效果:

div左边固定宽度,右边自适应宽度的更多相关文章

  1. css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

  2. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

  3. css左侧固定宽度右侧自适应

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  4. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  5. css布局:左边固定宽度,右边自适应;右边固定宽度,左边自适应

    左边固定宽度,右边自适应 浮动布局的方法 <section class="container homeSection" id="mainSection"& ...

  6. div 两列布局,左侧固定宽度px,右侧自适应宽度,满屏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  7. 老生长谈:css实现右侧固定宽度,左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...

  8. 老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...

  9. css实现右侧固定宽度,左侧宽度自适应

    https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...

随机推荐

  1. Effective Java -- 对于所有对象都通用的方法

    覆盖equb时请遵循通用约定: 自反性.对于任何非null的引用值x,xequals(x)必须返回true. 对称性.对于任何非null的引用值x和y,当且晋档y.equals(x)返回true的时候 ...

  2. 解题:EXNR #1 金拱门

    题面 大力统计题 考虑把和的平方拆开,最终就是许多对位置乘起来求和.所以考虑每对位置的贡献,对于$a_{i,j}$和$a_{k,h}(1<=i<=k<=n,1<=j<=h ...

  3. SQL Server 数据库对象命名参考

    一. 引言 编码规范是一个优秀程序员的必备素质,然而,有很多人非常注重程序中变量.方法.类的命名,却忽视了同样重要的数据库对象命名.这篇文章结合许多技术文章和资料,以及我自己的开发经验,对数据库对象的 ...

  4. 【CSS】定位层

    html:定位层1.概念: >>.定位层是由html元素(标签)形成的一个特殊的box盒子. >>.其重点在于“定位”,而html元素(标签)的定位方式由CSS来控制. 通常情 ...

  5. JavaScript实现ajax发送表单数据

    知识点: 1.重置表单数据 2.获取表单数据(纯JavaScript) 3.设置表单数据(纯JavaScript) 4.ajax发送数据到客户端 (1)设置请求头,自己组合数据 (2)实例化表单对象, ...

  6. 何凯文每日一句打卡||DAY5

  7. python学习笔记5--json处理

    import json #json串就是字符串. d = { 'car':{'color':'red','price':100,'count':50}, 'bus':{'color':'red','p ...

  8. html5 canvas简单的直线路径

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. R8:Learning paths for Data Science[continuous updating…]

    Comprehensive learning path – Data Science in Python Journey from a Python noob to a Kaggler on Pyth ...

  10. 第10月第1天 iOS crash

    1. find /Applications/Xcode6.1.app -name symbolicatecrash -type f tempdeMac-mini:crash temp$ dwarfdu ...