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 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...
随机推荐
- Maven添加第三方库及部署配置
配置其实很简单,还是修改~/.m2/settings.xml文件,具体用文件说话,其他不解释. <?xml version="1.0" encoding="UTF- ...
- error: The function/feature is not implemented (Odd-size DCT's are not implemented)in function cvDCT.
然后我在使用函数cvDCT(...)时,它所处理的矩阵的行数和列数必须是偶数.如果行列中任何一个是奇数,则会报错,如下: The function/feature is not implemen ...
- Nginx反向代理2--配置文件配置
2.1Nginx的反向代理 什么是正向代理? 1.2 使用nginx实现反向代理 Nginx只做请求的转发,后台有多个http服务器提供服务,nginx的功能就是把请求转发给后面的服务器,决定把请 ...
- 理解JVM GC
理解JVM GC对于我们把控Java应用有很大的帮助.下面我从运维角度,把网上的JVM相关的资料整理如下,以加深对JVM GC的理解.如有错误的地方,请看官指正. JVM内存使用分类 JVM的内存分区 ...
- Hadoop生态圈-Azkaban实战之Command类型多job工作流flow
Hadoop生态圈-Azkaban实战之Command类型多job工作流flow 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Azkaban内置的任务类型支持command.ja ...
- <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
代码一:<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> http-eq ...
- Logistic Regression – Geometric Intuition
Logistic Regression – Geometric Intuition Everybody who has taken a machine learning course probably ...
- 用matplotlib绘制每次交易的盈亏三角形
用matplotlib绘制每次交易的盈亏三角形 结果: 代码: python def plot_trade_triangle(self): # plot each trade as a trade-t ...
- javascript命名空间
命名空间:命名空间有助于减少程序中所需要的全局变量的数量,并且同时还有助于避免命名冲突或过长的名字前缀. 板栗: var MYAPP = MYAPP || {}; MYAPP.namespace = ...
- js和jquery使按钮失效为不可用状态的方法
设置disabled属性为true即为不可用状态. html代码: <input type="button" value="提交" id="bt ...