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()语法非常简单,就像我们小时候 ...
随机推荐
- python系列:二、Urllib库的高级用法
1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Headers 的属性. 打开我们的浏览器,调 ...
- SQL Server行转列、不确定列的行转列
本文使用的方法: 1.用Case When 2.PIVOT函数 首先,模拟一张表: -- 创建模拟数据 CREATE TABLE #TempSubjectResult ( StudentName NV ...
- Linux 系统安全相关
本篇关于Linux的一些安全知识,主要就是与账号相关的安全. 账户文件锁定 当服务器中的用户账号已经固定,不在进行更改,可锁定账户文件.锁定后,无法添加.删除账号,也无法更改密码等. 锁定账户文件 c ...
- MySQL用户与权限
用户连接到mysql,并做各种查询,在用户和服务器中间分为两个阶段: 1:用户是否有权连接上来 2:用户是否有权执行此操作(如select,update等等) 先看第一个阶段:服务器如何判断用户是否有 ...
- Linux命令——groups
groups用于查询当前用户的属组,没有参数.
- MySQL/MariaDB数据库的函数
MySQL/MariaDB数据库的函数 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. MySQL/MariaDB数据库的函数分为系统函数和用户自定义函数(user-define ...
- PHP编程实现阳历转换为阴历的方法
php类: 2 /** 3 *PHP编程实现阳历转换为阴历的方法 4 *根据实际情况所需进行调用 5 * 6 / 7 10 <?php class Lunar { public $MIN_YEA ...
- 初试linux,cp、rm、mv、file、umask等命令粗略使用方法
ls --color=never 不要依據檔案特性給予顏色顯示: --color=always 顯示顏色 --color=auto 讓系統自行依據設定來判斷是否給予顏色 --full-time 以完整 ...
- [USACO15DEC]最大流Max Flow(树上差分)
题目描述: Farmer John has installed a new system of N−1N-1N−1 pipes to transport milk between the NNN st ...
- myBatis框架之入门(四)
Mybatis多表管理查询 多表关联关系分析: 多表关联:至少两个表关联.分析多表关系的经验技巧:从一条记录出发,不要从表整体去分析,比如分析A表和B表关系,A表中的一条记录对应B表中的几条记录,如果 ...