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()语法非常简单,就像我们小时候 ...
随机推荐
- 工厂交接班易出问题?MES系统实现精准对接
工厂交接班制度非常的严格和复杂,而MES系统能让繁琐的交接班流程简单快捷无措.MES系统在发生事件时记录传递事件,还可以主动对事件进行分类和报告.人员可以查看和深入到以前或当前班次的个别事件. 随着工 ...
- Excel内部编码查看与验证工具
Excel 2007 以前版本 MS-XLS内部结构:BIFF格式 https://docs.microsoft.com/en-us/openspecs/office_file_formats/ms- ...
- Oracle 11g RAC to RAC ADG搭建(一)采用rman备份恢复方式
(一)基础环境 主库 备库 操作系统 RedHat6.7 RedHat6.7 服务器名称 primarydb1primarydb2 standbydb1standbydb2 IP地址规划 192. ...
- Yii2安装任务调度扩展
一.安装扩展 在安装之前添加仓库到composer.json文件中 "repositories": [{"type": "vcs", &qu ...
- Node.js 入门到干活,10 个优质项目就够了!
Node.js 在很多大公司都有不错的实践,比如:淘宝.天猫 Web 版,很多页面都是在 Node 服务器上渲染的.还有各种脚手架.前端打包发布工具.构建生态的小工具,也基本都是 Node.js 编写 ...
- 动态创建自绘的CListBox注意事项
Create(WS_VISIBLE|WS_CHILD|LBS_NOTIFY|LBS_OWNERDRAWFIXED|LBS_HASSTRINGS|LBS_NOINTEGRALHEIGHT ,rcWnd, ...
- python开发笔记-ndarray方法属性详解
Python中的数组ndarray是什么? 1.NumPy中基本的数据结构 2.所有元素是同一种类型 3.别名是array 4.利于节省内存和提高CPU计算时间 5.有丰富的函数 ndarray的创建 ...
- shell脚本自动化安装pgsql10.5版本
看到有个大佬写了个很实用的脚本,于是这里做了转载 #!/bin/bash #进入软件的制定安装目录 echo "进入目录/usr/local,下载pgsql文件" cd /usr/ ...
- SparkSQL读写外部数据源-通过jdbc读写mysql数据库
object JdbcDatasourceTest { def main(args: Array[String]): Unit = { val spark = SparkSession .builde ...
- 读取txt写入excel
import csv #实现的思想:首先从txt中读取所有的内容,NUM=1当做键,其他当做值,如果查找缺少a,b,c,d,e,f,g# 则NUM不会添加到字典中,然后通过所有的NUM和字典中的KEY ...