样式:

<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. How to 对拍?

    对拍从数学的统计学角度来说是一个好的方法,至少能在你竞赛中帮你拿回一些分--yzr大牛pas的对拍一开始还没写过,突然想学一下对拍.那么就学吧.dp水题(搜索):https://www.luogu.o ...

  2. Django通过中间件实现登录验证demo

    前提:中间件版的登录验证需要依靠session,所以数据库中要有django_session表. from django.conf.urls import url from django.contri ...

  3. Build CRUD Application with jQuery EasyUI

    http://www.jeasyui.com/tutorial/app/crud.php It has become a common necessily for web application to ...

  4. 如何获取codeforces的完整数据

    推荐: 如何获取codeforces的完整数据?(玄学方法) http://www.cnblogs.com/Saurus/p/6220513.html

  5. mysql新版本问题

    异常错误:Loading class `com.mysql.jdbc.Driver'. This is deprecated. The new driver class is `com.mysql.c ...

  6. HTML5 文件API

    filelist 表示文件对象的列表. <form name="upload"> <input type="file" name=" ...

  7. bzoj千题计划287:bzoj1228: [SDOI2009]E&D

    http://www.lydsy.com/JudgeOnline/problem.php?id=1228 打SG函数表,找规律: 若n是奇数m是奇数,则SG(n,m)=0 若n是偶数m是偶数,则SG( ...

  8. SQL语句(七)简单查询

    --简单信息查询 --例1 查询所有学生的信息 --学生 -- Student --所有学生 -- 不限定班级.性别.年龄等条件 --所有信息 -- 所有字段,* select * from stud ...

  9. .NET面试题系列(七)IIS

    应用程序池的集成模式和经典模式的区别 应用程序池模式会影响服务器处理托管代码请求的方式. 如果托管应用程序在采用集成模式的应用程序池中运行,服务器将使用 IIS 和 ASP.NET 的集成请求处理管道 ...

  10. HDU 1176 免费馅饼 DP类似数塔题

    解题报告: 小明走在一条小路上,这条小路的长度是10米,从左到右依次是0到10一共十个点,现在天上会掉馅饼,给出馅饼掉落的坐标和时间,一开始小明的位置是在坐标为5的位置, 他每秒钟只能移动一米的距离, ...