div {
display: inline-block; /* 如需支持IE8以下版本，用浮动来做 */
width: calc(100% / 3.09); /* 此处运用了一个css3的表达式，将div三等分，IE8及以上可以支持，当然也可以根据需要设置固定值 */
width: -webkit-calc(100% /3.09); /*3.09 排除margin的宽度*/
width: -moz-calc(100% / 3.09);
height: 100%;
}
-->

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style>

        .wrapper {

    width: 100%;    /* 也可以固定宽度 */

    height: 200px;

}

.wrapper > div {

    display: inline-block;    /* 如需支持IE8以下版本，用浮动来做 */

    width: calc(100% / 3.09);    /* 此处运用了一个css3的表达式，将div三等分，IE8及以上可以支持，当然也可以根据需要设置固定值 */

    width: -webkit-calc(100% /3.09); /*3.09 排除margin的宽度*/

    width: -moz-calc(100% / 3.09);

    height: 100%;

}

    </style>

</head>

<body>

    <div class="wrapper">

        <div style="background-color:red"></div>

        <div style="background-color:green"></div>

        <div style="background-color:blue"></div>

    </div>

</body>

</html>

DIV+CSS 按比例等分的更多相关文章

  1. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  2. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  3. HTML的三种布局：DIV+CSS、FLEX、GRID

    Div+css布局 也就是盒子模型,有W3C盒子模型,IE盒子模型.盒子模型由四部分组成margin.border.padding.content. 怎么区别这两种模型呢,区别在于w3c中的width ...

  4. div+css实现双飞翼布局

    本例通过div+css实现HTML金典布局双飞翼布局,该布局结构为上中下结构,上:header头:下:footer尾:中:内容,将内容分为了三个结构,左中右 下图是效果图 我们来看下代码 <!D ...

  5. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  6. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  7. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  8. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  9. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

随机推荐

  1. 2018.09.27 bzoj4300: 绝世好题（二进制dp）

    传送门 简单dp. 根据题目的描述. 如果数列bn{b_n}bn​合法. 那么有:bi−1b_{i-1}bi−1​&bi!=0b_i!=0bi​!=0,因此我们用f[i]f[i]f[i]表示数 ...

  2. 2018.09.24 bzoj1016: [JSOI2008]最小生成树计数（并查集+搜索）

    传送门 正解是并查集+矩阵树定理. 但由于数据范围小搜索也可以过. 我们需要知道最小生成树的两个性质: 不同的最小生成树中,每种权值的边出现的个数是确定的 不同的生成树中,某一种权值的边连接完成后,形 ...

  3. 继承方法-->最终模式

    function inherit(Target,Origin){ function F(){}; F.prototype = Origin.prototype; // Targrt.prototype ...

  4. 可视化iOS应用程序开发的6个Xcode小技巧

    FIXME 该标签用来提醒你代码中存在稍后某个时间需要修改的部分.(编辑注:网络上有一些可以用来收集项目中`TODO`和`FIXME`标签的辅助插件,比如XToDo https://github.co ...

  5. （深搜）Sum It Up -- poj --1564

    链接: http://poj.org/problem?id=1564 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=88230#probl ...

  6. no_namespace rename 在C++中是什么意思啊

    #import "C:\Program Files\Common Files\System\ado\msado15.dll" no_namespace rename("E ...

  7. Corel Video Studio Pro X5

    视频编辑也是大学的时候接触过,依稀记得转场,字幕,滤镜,电子相册等的概念.自己也不经常用,所以实践经验比较少.正好接一个机会学习一下视频编辑,用的是会声会影X5. 需要的软件Photoshop,格式工 ...

  8. 比较分析 Spring AOP 和 AspectJ 之间的差别

    面向方面的编程(AOP) 是一种编程范式,旨在通过允许横切关注点的分离,提高模块化.AOP提供方面来将跨越对象关注点模块化.虽然现在可以获得许多AOP框架,但在这里我们要区分的只有两个流行的框架:Sp ...

  9. CodeFirst迁移注意点

    Context构造函数不检查__MigrationHistory 取消当数据库模型发生改变时删除当前数据库重建新数据库的设置.Database.SetInitializer<Context> ...

  10. sqlserver错误2，error 40

    打开配置管理器:开始-> sqlserver2014->配置工具->配置管理器 选择sqlserver服务,并将右侧箭头的指向右击设为启动就OK了