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. 企业如何避免错误决策?APS系统帮你忙

    一家企业不论什么事情都是有一定的决策者们,企业的决策者是对整个企业的兴衰成败主宰者主要责任. 战略一词它源于军事,是指为了获得有利的信息而进行的部署计划,那么现在战略合作也是被广泛的应用到商业的以及生 ...

  2. 【故障解决】enq: PS - contention

    [故障解决]enq: PS - contention 一.1  BLOG文档结构图       一.2  前言部分   一.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能, ...

  3. MySQL Replication--复制延迟01--源码瞎猜

    本人完全不懂MySQL源码,以下文字纯属瞎猜,如有误导,概不负责!. 源码版本:MySQL 5.6.28 在sql/rpl_slave.cc文件中,time_diff的计算代码为: /* The ps ...

  4. FriendlyCore overlayfs 挂载方式

    友善 friendlycore 挂载 overlayfs 过程: uboot 引导系统启动的时候加载 ramdisk.img  这个 cpio 格式的 initrd(虚拟文件系统). 注意: ramd ...

  5. MySQL/MariaDB数据库的冷备份和还原

    MySQL/MariaDB数据库的冷备份和还原 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL/MariaDB数据库的备份和还原概述 1>.为什么要备份 为了 ...

  6. python使用 pdb 进行调试--- python -m pdb xxx.py 即可 和gdb使用一样

    使用 pdb 进行调试 pdb 是 python 自带的一个包,为 python 程序提供了一种交互的源代码调试功能,主要特性包括设置断点.单步调试.进入函数调试.查看当前代码.查看栈片段.动态改变变 ...

  7. 详细点的Mysql主从同步

    .说明 此操作文档,如果在master机器已开启bin-log及设定好server-id的情况下,可以不锁表,不停机的实现master-slave同步.这一同步可以将master上已有数据同步到sla ...

  8. APP测试之MONKEY安装、使用

    1.先下载java的jdk;配置java变量 安装好之后会有两个文件夹一个是jdk 一个是jre(运行)然后配置好java环境变量:JAVA_HOME:C:\Program Files\Java\jd ...

  9. Java 出现cannot be resolved to a type

    package com.sysutil.util; /* thishi duo zhu */ // dan zhshi import com.sysutil.util.*; class Example ...

  10. 利用SQL直接生成模型实体类

    在网上找来一个别人写好的,生成实体类的SQL代码 declare @TableName sysname = 'lkxxb' declare @Result varchar(max) = 'public ...