某公司面试题：下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。使用CSS3中的功能实现它们的布局。

这里要用到的CSS3特性box-flex

box-flex ：属性规定框的子元素是否可伸缩其尺寸。可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。

此外，元素的可伸缩行柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

思路：

1.定义如下html：

<body>

<div class="box">

<div class="item">column1</div>

<div class="item">column2</div>

<div class="item">column3</div>

</div>

</body>

2.对column1设置固定宽度，box-flex：0（表示固定宽度，不参与自适应宽度）width:200px;

3.对column2  column3设置box-flex：1（按照比例1自适应宽度）；

css代码如下：

<head>

    <style type="text/css">

    .box {

        background-color:green;

        display:-moz-box;

        display:-webkit-box;

        display:box;

        height:50px;

        line-height:30px;

        text-indent:10px;

    }

    .item {

        box-flex:1;

        -moz-box-flex:1;

        -webkit-box-flex:1;

        margin:10px;

        background:#fff;

        text-align:center

    }

    .item:first-child {

        box-flex:0;

        -moz-box-flex:0;

        -webkit-box-flex:0;

        width:200px;

        background:#fff;

        margin:10px;

        text-align: left;

    }

    .item:nth-child(2) {

        margin:10px 0

    }

    </style>

</head>

看看它的显示效果：

CSS3:三个矩形，一个宽200px，其余宽相等且自适应满铺的更多相关文章

  1. 从零开始学 Web 之 CSS3（八）CSS3三个案例

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. Linux内核设计第三周——构造一个简单的Linux系统

    Linux内核设计第三周 ——构造一个简单的Linux系统 一.知识点总结 计算机三个法宝: 存储程序计算机 函数调用堆栈 中断 操作系统两把宝剑: 中断上下文的切换 进程上下文的切换 linux内核 ...

  3. 《Linux内核分析》 第三周 构造一个简单的Linux系统MenuOS

    Linux内核分析 第三周 构造一个简单的Linux系统MenuOS 张嘉琪 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/ ...

  4. 20135327郭皓--Linux内核分析第三周 构造一个简单的Linux系统MenuOS

    Linux内核分析第三周  构造一个简单的Linux系统MenuOS 前提回顾 1.计算机是如何工作的三个法宝 1.存储程序计算机 2.函数调用堆栈 3.中断 2.操作系统的两把宝剑 中断上下文的切换 ...

  5. 第三周——构建一个简单的Linux系统MenuOS

    [洪韶武 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ] 第三周  构建一个 ...

  6. 【shell&awk】对数据从右到左隔三位来一个.

    chinaunix 上看到这么一题: echo 12345678.12|sed **** 期望达到效果: 12,345,678.12 我的解法是先把字符串反转,然后根据‘.’分割,分割完成后对$2部分 ...

  7. Solon 开发，三、构建一个Bean的三种方式

    Solon 开发 一.注入或手动获取配置 二.注入或手动获取Bean 三.构建一个Bean的三种方式 四.Bean 扫描的三种方式 五.切面与环绕拦截 六.提取Bean的函数进行定制开发 七.自定义注 ...

  8. [Swift通天遁地]二、表格表单-(3)在表格中嵌套另一个表格并使Cell的高度自适应

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. CSS布局篇——固宽、变宽、固宽+变宽

    学了前端挺久了.近期写一个项目測试系统,布局时发现自己对变宽+固宽的布局还没有全然掌握,所以在这里总结一下,以后须要的时候回头看看. 1.最简单的当然是一列或多列固宽 比如两列固宽: <1> ...

随机推荐

  1. swiftSingleton模式

    swift在几个方面Singleton模式: 1. 全局变量 private let _singleton = Singleton() class Singleton: NSObject { clas ...

  2. sql server中的索引详情

    什么是索引 拿汉语字典的目录页(索引)打比方:正如汉语字典中的汉字按页存放一样,SQL Server中的数据记录也是按页存放的,每页容量一般为4K .为了加快查找的速度,汉语字(词)典一般都有按拼音. ...

  3. POJ 2586 Y2K Accounting Bug（枚举洪水问题）

    Y2K Accounting Bug Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10674   Accepted: 53 ...

  4. Android开发手册 （Android的手工教程MtAndroid开发手册）

    放出版许可协议 1.0 或者更新版本号. 未经版权全部者明白授权,禁止发行本文档及其被实质上改动的版本号.  未经版权全部者事先授权.禁止将此作品及其衍生作品以标准(纸质)书籍形式发行. 假设有兴趣再 ...

  5. C# 打开指定文件或网址

    System.Diagnostics.Process.Start的妙用: 文件夹打开时自动选中一个文件,比如自动选中此目录下的指定文件方法: Process.Start("Explorer& ...

  6. 8.无法訪问developer.android.com的解决方式。

    问题:无法訪问developer.android.com,就无法知道Android的最新信息. 解决的方法:寻找国外的代理ip,比方http://www.xici.net.co/上面的国外代理ip. ...

  7. ASP.NET MVC应用程序把文字写在图片上

    原文:ASP.NET MVC应用程序把文字写在图片上 Insus.NET实现这篇<MVC把随机产生的字符串转换为图片>http://www.cnblogs.com/insus/p/3624 ...

  8. java之JAVA异常

    异常的分类 1. 编译时被检测异常:只要是Exception和其子类都是,除了特殊子类RuntimeException体系.         此类异常在处理时必须进行声明或进行捕捉         这 ...

  9. linux学习书籍

    linux学习书籍推荐 网上看到的,做个标记.没研究过,仅供参考  linux编程学习   inux 学习书目推荐 Linux基础 1.<Linux与Unix Shell 编程指南> C语 ...

  10. WEB安全实战（五）XSS 攻击的第二种解决方式（推荐）

    序 说到 XSS 攻击,前边已经有两篇文章在讲这个事了,这次又拿出来说,主要是针对近期工作中的一些新的问题.那么之前是怎么解决问题的呢?为什么又要换解决方式?以下就具体的跟大家分享一下. 旧方案 公司 ...