div左边固定宽度,右边自适应宽度
样式:
<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左边固定宽度,右边自适应宽度的更多相关文章
- css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法
方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
- CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...
- css左侧固定宽度右侧自适应
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
- css布局:左边固定宽度,右边自适应;右边固定宽度,左边自适应
左边固定宽度,右边自适应 浮动布局的方法 <section class="container homeSection" id="mainSection"& ...
- div 两列布局,左侧固定宽度px,右侧自适应宽度,满屏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 老生长谈:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- 老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- css实现右侧固定宽度,左侧宽度自适应
https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...
随机推荐
- BZOJ刷题指南(转)
基础(65) 巨水无比(4):1214.3816:2B题:1000A+B:2462:输出10个1 模拟/枚举/暴力(15):4063傻子模拟:1968小学生暴力:1218前缀和暴力:3856读英文:4 ...
- 【bzoj3576】 Hnoi2014—江南乐
http://www.lydsy.com/JudgeOnline/problem.php?id=3576 (题目链接) 题意 给出一个数$F$,然后$n$堆石子,每次操作可以把一堆不少于$F$的石子分 ...
- ctrl+E 快速显示当前打开的编辑列表
ctrl+E 快速显示当前打开的编辑列表
- js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventLis ...
- webapi框架搭建系列博客
webapi框架搭建系列博客 webapi框架搭建-创建项目(一) webapi框架搭建-创建项目(二)-以iis为部署环境的配置 webapi框架搭建-创建项目(三)-webapi owin web ...
- bzoj千题计划185:bzoj1260: [CQOI2007]涂色paint
http://www.lydsy.com/JudgeOnline/problem.php?id=1260 区间DP模型 dp[l][r] 表示涂完区间[l,r]所需的最少次数 从小到大们枚举区间[l, ...
- ftp服务部署
注:Centos7环境,添加用户指定目录后默认其为此用户的共享目录. chroot_local_user=YES chroot_list_enable=YES # (default follows) ...
- MySQL-存储过程procedure
存储过程:是一个SQL语句集合,当主动去调用存储过程时,其中内部的SQL语句会按照逻辑执行. 1.创建存储过程: -- 创建存储过程 delimiter // create procedure p1( ...
- 非常有助于理解二极管PN结原理的资料
https://www.zhihu.com/question/60053574/answer/174137061 我理解的半导体 pn 结的原理,哪里错了? https://blog.csdn.net ...
- insert into与insert ignore以及replace into的区别
insert ignore表示,如果表中已经存在相同的记录,则忽略当前新数据: INSERT INTO有无数据都插入,如果主键则不插入; REPLACE INTO 如果是主键插入则会替换以前的数据; ...