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.10.23 vijo1243生产产品（单调队列优化dp）

    传送门 这道单调队列真的有点难写啊. 方程感觉挺简单的. f[i][j]f[i][j]f[i][j]表示在第iii个车间结束前jjj次步骤的最小代价. 然后用单调队列毒瘤优化一下就行了. 代码: #i ...

  2. 2018.09.25 bzoj3572: [Hnoi2014]世界树（虚树+树形dp）

    传送门 虚树入门题? 好难啊. 在学习别人的写法之后终于过了. 这道题dp方程很好想. 主要是不好写. 简要说说思路吧. 显然最优值只能够从子树和父亲转移过来. 于是我们先dfs一遍用儿子更新父亲,然 ...

  3. 2018.09.01 loj#2330. 「清华集训 2017」榕树之心（树形dp）

    传送门 树形dp好题啊. 我们用w[i]" role="presentation" style="position: relative;">w[ ...

  4. Intelj IDEA的pom.xml显示错误can not reconnect

    从GitHub上边down下来的开源项目,报错莫名其妙,后来发现是跟本地hosts文件有关系 hosts文件加上 127.0.0.1 localhost 然后pom文件reload一下就

  5. [GO]删除切片的某个值

    func removePro(ddbenv []*model.EnvInfo, k int) []*model.EnvInfo { :]...) } for k, v := range ddbenv ...

  6. 【转载】不得不知道的Python字符串编码相关的知识

    原文地址:http://www.cnblogs.com/Xjng/p/5093905.html 开发经常会遇到各种字符串编码的问题,例如报错SyntaxError: Non-ASCII charact ...

  7. js动态添加删除行，兼容ie和火狐

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. （匹配）The Accomodation of Students --HDU --2444

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=2444 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  9. 用idea简单创建web项目——两种方式

    最近同学让我教她们用idea创建web项目,于是我用两种方式创建web项目,并整理截图给她们看,一种是用maven创建,一种是不用maven创建,适合菜鸟哈哈~ 方法一:不用maven 1.解压tom ...

  10. html.EditorForModel自定义模版

    https://www.cnblogs.com/lori/p/5969658.html  http://www.cnblogs.com/yinzixin/archive/2012/12/18/2821 ...