样式:

<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. git-jenkins-k8s构建tomcat项目实践

    相关环境(部署安装略...):jenkins 安装k8s 集群环境部署docker 私有仓库搭建 jenkins 创建项目 Execute shell 构建docker镜像上传到私有仓库,以构建时间做 ...

  2. John:How JavaScript Timers Work

    John大神的bolg链接:http://ejohn.org/blog/how-javascript-timers-work/ JavaScript中的定时器经常表现的跟我们想象的不同,我们用三个函数 ...

  3. 鸟哥的Linux私房菜——第十五章:正规表示法

    视频链接 B站:http://www.bilibili.com/video/av10364761/ 目录如下 1. 前言:2. 基础正规表示法:2.1 以 grep 撷取字符串 (grep -iv   ...

  4. 说说SQL Server的数据类型

    以SQL Server为例,SQL Server的数据类型总共有33种,归纳为一下类别: 精确数字 Unicode字符串 近似数字 二进制字符串 日期和时间 其他数据类型 字符串   1.数字数据类型 ...

  5. 第七节 认识SpringMVC中的表单标签

    所谓成熟,就是:你要习惯,任何人的忽冷忽热:也要看淡,任何人的渐行渐远: --胖先生 SpringMVC的表单标签 回顾: JSTL标签 --C标签 FMT标签 自学:JSP如何自定义标签[开源社区当 ...

  6. transform 属性之 transform-origin与顺序问题

    transform属性之 transform-origin 针对transform中的几种值的先后顺序 transform值的先后顺序: 注意: 当我们在旋转后再进行位移的时候,其实是按照旋转后的坐标 ...

  7. 流媒体技术学习笔记之(六)FFmpeg官方文档先进音频编码(AAC)

    先进音频编码(AAC)的后继格式到MP3,和以MPEG-4部分3(ISO / IEC 14496-3)被定义.它通常用于MP4容器格式; 对于音乐,通常使用.m4a扩展名.第二最常见的用途是在MKV( ...

  8. Javascript加速运动与减速运动

    加速运动,即一个物体运动时速度越来越快:减速运动,即一个物体运动时速度越来越慢.现在用Javascript来模拟这两个效果,原理就是用setInterval或setTimeout动态改变一个元素与另外 ...

  9. 第12月第1天 MASConstraintMaker crash

    1. crash [valueLabel mas_makeConstraints:^(PAKitMASConstraintMaker *make) { make.left.equalTo(finish ...

  10. FinalShell 推荐

    FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发,运维需求. 用户QQ群 342045988 Windows版下载地址:http:/ ...