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.06.29 洛谷P1505 [国家集训队]旅游（树链剖分）

    旅游 题目描述 Ray 乐忠于旅游,这次他来到了T 城.T 城是一个水上城市,一共有 N 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了节约成本,T 城的任意两个景点之间有且只有 ...

  2. 【转】web应用缓慢故障分析

    在这以后里分享一篇关于web应用缓慢的分析过程,感觉挺有用的. 原文出处:http://xjsunjie.blog.51cto.com/999372/751585 友在一家购物网站做运维不久,今日打电 ...

  3. aused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sessionFactory' defined in class path resource [applicationContext.xml]: Invocation of init method fai

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'roleDaoImpl' ...

  4. 超全table功能Datatables使用的填坑之旅--1: 无法渲染表格数据: ajax调用了参数 : success

    问题:Datatables: 无法渲染表格数据 原因:datatables的ajax 传了"success":function(){},导致无法渲染数据. ajax 删掉" ...

  5. Java 注解概要

    转载自:https://www.cnblogs.com/peida/archive/2013/04/24/3036689.html(Java注解就跟C#的特性是一样的) 要深入学习注解,我们就必须能定 ...

  6. Java 窗体居中 通用代码

    Toolkit kit = Toolkit.getDefaultToolkit();    // 定义工具包    Dimension screenSize = kit.getScreenSize() ...

  7. 编写属于自己的linux命令

    开篇: 问题和解决思路 在使用一些基础IDE时,工具经常会在我们建立特定文件时给我们一个已经有了一些特定代码的模板文件,但是在linux开发时,没有这样的IDE,怎么办?虽然代码量不是很多,但是能一次 ...

  8. button设置边宽和圆角

       UIButton *meifuButton = [UIButton buttonWithType:UIButtonTypeSystem];         [meifuButton setTit ...

  9. C#-安全

    分为两种,代码访问安全,基于角色的安全性. 代码访问安全.是代码告诉.net框架,自己(代码)正确执行,需要的权限,.net框架手动分配代码可执行操作方面的权限,代码可列出调用自己需要的权限集合. 基 ...

  10. 如何用命令行将我的Phonegap环境更新到最新版本？

    从npm安装的Phonegap(version > 3.0),更新命令如下 npm update -g phonegap 检查当前本机环境的最新版本 phonegap -v 检查npm的最新ph ...