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. AIX安装单实例11gR2 GRID+DB

    AIX安装单实例11gR2 GRID+DB   一.1  BLOG文档结构图       一.2  前言部分   一.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以 ...

  2. centos7 docker安装Jenkins BlueOcean

    Jenkins是一款Java开发的跨平台持续集成和持续发布的开源项目,Jenkins已经作为各大公司进行CI/CD的首选工具.而BlueOcean是Jenkins推出的一个插件,其目的就是让程序员执行 ...

  3. C#中多集合组合实现

    C#中多集合组合使用方法,主要用到 Enumerable.Join方法 var skuInfoList = new Dictionary<int, List<long>>(); ...

  4. mysql表的连接

    目录 1.笛卡尔积:将两表所有的数据一一对应,生成一张大表 2.连表查询 1.inner join 内连接 2.left join 左连接(left join左边的表为主表,主表记录必须全部显示,辅表 ...

  5. Python入门篇-函数、参数及参数解构

    Python入门篇-函数.参数及参数解构 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.函数概述 1>.函数的作用即分类 函数 数学定义:y=f(x) ,y是x的函数,x ...

  6. Qualification Rounds(Codeforces Round #438 by Sberbank and Barcelona Bootcamp (Div. 1 + Div. 2 combined)+状态压缩)

    题目链接 传送门 题意 现总共有\(n\)个题目\(k\)支参赛队伍,已知每个题目各队伍是否会写,现问你能否从题目中选出一个子序列使得每支队伍最多只会写一半的题目. 思路 对于每个题目我们用二进制压缩 ...

  7. test20190904 JKlover

    100+100+100=300.最后十分钟极限翻盘. 树链剖分 给一棵以1为根的有根树,开始只有1有标记. 每次操作可以给某个点打上标记,或者询问从某个点开始向上跳,遇到的第一个有标记的点. 对于 1 ...

  8. async-validator 表单验证注意事项

    1. this.$refs[formName].validate()里面的内容不执行 解决问题出处:https://segmentfault.com/q/1010000009679079 问题描述:1 ...

  9. AtCoder Beginner Contest 132 解题报告

    前四题都好水.后面两道题好难. C Divide the Problems #include <cstdio> #include <algorithm> using names ...

  10. 项目集成Spring Security

    前言 之前写的 涂涂影院管理系统 这个 demo 是基于 shiro 来鉴权的,项目前后端分离后,显然集成 Spring Security 更加方便一些,毕竟,都用 Spring 了,权限管理当然 S ...