A, ----float+calc(css3新属性计算属性)方式

<div class="Father">
<div class="LeftChildren">我是左侧</div>
<div class="RightChildren">我是右侧</div>
</div>
<style rel="stylesheet/scss" lang="scss">
.Father {
border: 1px solid red;
height: 100px;
}
.LeftChildren {
width: 50px;
border: 1px solid blue;
float: left;
}
.RightChildren {
width: calc(100% - 50px);
border: 1px solid green;
float: right;
}
}
</style>

B, ----flex方式

<div class="Father">
<div class="LeftChildren">我是左侧</div>
<div class="RightChildren">我是右侧</div>
</div>
<style rel="stylesheet/scss" lang="scss">
.Father {
border: 1px solid red;
height: 100px;
display: flex;
}
.LeftChildren {
width: 50px;
border: 1px solid blue;
}
.RightChildren {
border: 1px solid green;
flex: 1;
}
</style>

.

css3实现左侧固宽,右侧随着屏幕,右侧随着屏幕变化而变化的更多相关文章

  1. CSS左侧固定宽 右侧自适应(兼容所有浏览器)

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

  2. CSS布局 -- 左侧定宽,右侧自适应

    左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...

  3. NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应

    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...

  4. 请给出一个左侧定宽右侧自适应的HTML结构及样式

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  5. table-cell完成左侧定宽,右侧定宽及左右定宽等布局

    使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; f ...

  6. css实现左侧固定宽,右侧自适应的7中方法

    一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...

  7. css实现两栏布局,左侧固定宽,右侧自适应的7中方法

    一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...

  8. CSS布局篇——固宽、变宽、固宽+变宽

    学了前端挺久了.近期写一个项目測试系统,布局时发现自己对变宽+固宽的布局还没有全然掌握,所以在这里总结一下,以后须要的时候回头看看. 1.最简单的当然是一列或多列固宽 比如两列固宽: <1> ...

  9. css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位

    css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...

随机推荐

  1. 使用sudo进行Linux权限升级技巧

    0x00 前言 在我们之前的文章中,我们讨论了如何使用SUID二进制文件和/etc/passwd 文件的Linux权限提升技巧,今天我们发布了另一种“使用Sudoers文件进行Linux权限提示技巧” ...

  2. 红米手机使用应用沙盒一键修改sdk信息

    前面文章介绍了怎么在安卓手机上安装激活XPOSED框架,XPOSED框架的极强的功能各位都介绍过,能不修改APK的前提下,修改系统内核的参数,打个比方在某些应用情景,各位需要修改手机的某个系统参数,这 ...

  3. 笔谈kxmovie开源播放器库的使用

    开源播放器项目 kxmovie(https://github.com/kolyvan/kxmovie),现在仍然是很多刚开始接触播放器开发的程序员的参照范本.以下是我操作kxmovie项目的过程: ( ...

  4. nodejs SSL Error: CERT_UNTRUSTED while using npm command 错误

    SSH 使用错误,其实我们关掉HTTPS就好了 npm config set strict-ssl false 或者 npm config set registry="http://regi ...

  5. Abp vNext抽茧剥丝01 使用using临时更改当前租户

    在Abp vNext中,如果开启了多租户功能,在业务代码中默认使用当前租户的数据,如果我们需要更改当前租户,可以使用下面的方法 /* 此时当前租户 */ using (CurrentTenant.Ch ...

  6. vue.js 样式绑定

    简单用法 <div v-bind:height="bindStyle"> 复杂用法 <div v-bind:style="bindStyle" ...

  7. elasticsearch获取字段missing的数据

    用head查询: demo如下 http://localhost:9200/sj_0505/lw_point_location/ _search post { "query": { ...

  8. MySQL Percona Toolkit--pt-osc与online DDL选择

    pt-osc和online ddl选择 1.如果表存在触发器,不能使用pt-osc.2.如果新增唯一索引,不建议使用pt-osc,以免数据丢失.3.修改索引.外键.列名时,优先选择使用ALGORITH ...

  9. MySQL Percona Toolkit--pt-osc学习

    工作流程 1.检查更改表是否有主键或唯一索引,是否有触发器 2.检查修改表的表结构,创建一个临时表,在新表上执行ALTER TABLE语句 3.在源表上创建三个触发器分别对于INSERT UPDATE ...

  10. composer的用法笔记

    一.到compose官网下载 composer.exe 的安装的文件,直接打开安装,在安装的目录的要选择到,你的开发环境中的 php.exe 的所在目录里..例如:D:\phpStudy\php\ph ...