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. mysql配置临时日志(无需重启服务)

    use mysql; //指定日志的存储方式 SET GLOBAL log_output = 'TABLE'; //查询日志开启 SET GLOBAL general_log = 'ON'; sele ...

  2. 前端框架 Vue.js 概述

    Vue.js 是什么 图片 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视 ...

  3. HTTPS安全通信过程

         前言:本文是的第三篇文章.第一篇文章<常见加密算法特点及适用场景>,介绍了常见加密算法及其适用的场景,对加密算法做一个总体的概述.第二篇文章<非对称加密算法-RSA算法&g ...

  4. maven学习笔记五(仓库搭建,私服配置)

    实际项目中,我们往往都是多人开发,这个时候,假如一个项目有300多M.用的jar包有100多个.只要项目组来一个人就从中央仓库下载依赖的jar,这种下载一般都需要持续很久.而且中央仓库一般都是配置在外 ...

  5. Mac系统安装JDK

    MAC 安装 JDK: 这篇文章主要为在MAC苹果系统下安装JDK1.8并配置系统环境变量. 主要分为以下步骤: 到Oracle官网下载JDK1.8安装包. 打开获取到的安装包按步骤安装到系统上. 配 ...

  6. 20.centos7基础学习与积累-006-软实力-画图

    从头开始积累centos7系统运用 亿图是用指南 安装亿图软件 修改基础配置 路径:文件==>选项==>常规 需要修改的参数: 撤销次数:256 自动保存间隔:2分钟 路径:文件==> ...

  7. Guava Cache 工具类

    maven依赖 <dependency> <groupId>com.google.guava</groupId> <artifactId>guava&l ...

  8. ADAS 实车道路及场地测试服务

    概述         高级驾驶员辅助系统(ADAS)作为车辆主动安全的关键系统,已经被越来越多的车辆配置.ADAS系统与车辆动力.制动.转向系统有直接耦合,是车辆中可靠性要求很高的控制系统,因此针对A ...

  9. 项目Alpha冲刺 7

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 介绍第7天冲刺的项目进展.问题困难和心得体会 1.团队信息 队名:火鸡堂 队 ...

  10. danci8

    approach 英 [ə'prəʊtʃ] 美 [ə'protʃ] n. 方法:途径:接近 vt. 接近:着手处理 vi. 靠近 emulate 英 ['emjʊleɪt] 美 ['ɛmjulet] ...