css3实现左侧固宽,右侧随着屏幕,右侧随着屏幕变化而变化
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实现左侧固宽,右侧随着屏幕,右侧随着屏幕变化而变化的更多相关文章
- CSS左侧固定宽 右侧自适应(兼容所有浏览器)
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
- CSS布局 -- 左侧定宽,右侧自适应
左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...
- NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应
CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...
- 请给出一个左侧定宽右侧自适应的HTML结构及样式
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- table-cell完成左侧定宽,右侧定宽及左右定宽等布局
使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; f ...
- css实现左侧固定宽,右侧自适应的7中方法
一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...
- css实现两栏布局,左侧固定宽,右侧自适应的7中方法
一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...
- CSS布局篇——固宽、变宽、固宽+变宽
学了前端挺久了.近期写一个项目測试系统,布局时发现自己对变宽+固宽的布局还没有全然掌握,所以在这里总结一下,以后须要的时候回头看看. 1.最简单的当然是一列或多列固宽 比如两列固宽: <1> ...
- css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位
css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...
随机推荐
- 【Excel】【Salesforce】函数拓展
1.if 2.vlookup
- CentOS 使用163yum源
下载163源 # wget http://mirrors.163.com/.help/CentOS7-Base-163.repo 如果报以下错误 -bash: wget: command not fo ...
- win7安装小米8驱动
首先尝试了小米助手,安装后提示说要会弹窗然后选择确定,但是并没有弹窗:尝试管理员方式运行,依然没有弹框.差评. 正确的姿势是:http://bigota.d.miui.com/tools/xiaomi ...
- 【问题】如何在Linux与Windows间共享文件
实验环境 Linux LSB Version: :core-4.1-amd64:core-4.1-noarch Distributor ID: CentOS Description: CentOS L ...
- 51nod 2502 最多分成多少块
小b有个长度为n的数组a,她想将这个数组排序. 然而小b很懒,她觉得对整个数组排序太累了,因此她请你将a分成一些块,使得她只需要对每一块分别排序,就能将整个数组排序. 请问你最多能把a分成多少块. 保 ...
- es6 字符串模板拼接和传统字符串拼接
字符串拼接是在日常开发中必不可少的一个环节. 注意:字符串可以用单引号'',或者""双引号,出于方便大家理解,文章以下内容统一使用单引号''! 如果只是一个字符串和一个变量拼接,使 ...
- pycharm——常用快捷键操作
编辑类(Editing): Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 类名完成Ctrl + Shift + Enter 语句完成Ctrl + P ...
- Sql 数据库 用户密码MD5加密
直接给代码先 DECLARE @TAB TABLE( NAEM VARCHAR(50) ) DECLARE @PA VARCHAR(50) DECLARE @A VARCHAR(10) SET @A= ...
- Python语言程序设计(3)--字符串类型及操作--time库进度条
1.字符串类型的表示: 三引号可做注释,注释其实也是字符串 2.字符串的操作符 3.字符串处理函数 输出:
- 小米BL不解锁刷机
关于小米NOTE顶配近期解锁的问题中发现还有很多人不会用9008模式刷机,现出个简单教程方便米粉们救砖.硬件:小米NOTE顶配手机 win10系统的电脑 手机与电脑相连的数据线软件:老版本的mifla ...