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. CentOS中的一些小技巧和特殊知识

    一:软件: firefox 1.在tab栏右键可以打开上一次关闭的标签. 2.在上面的搜索栏可以添加搜索引擎,这样就不需要再打开标签页访问搜索引擎主页来搜索了. 3.获取firefox下载弹框的资源U ...

  2. android Qzone的App热补丁热修复技术

    转自:https://mp.weixin.qq.com/s?__biz=MzI1MTA1MzM2Nw==&mid=400118620&idx=1&sn=b4fdd5055731 ...

  3. STL中的algorithm

    STL中的algorithm #include<algorithm>中的泛函算法,需要添加头文件. 搜索算法:find() .search() .count() .find_if() .s ...

  4. Should Assertion Library

    Should Assertion Library,通常在测试时用到,可以与nunit 结合使用. 已经从codeplex 迁移到 github.网址如下 https://github.com/eric ...

  5. TensorFlow入门案例

    入门小案例,分别是回归模型建立和mnist数据集的模型建立 1.回归案例: import tensorflow as tf import numpy as np from tensorflow.exa ...

  6. nodejs 上传文件 upload

    只是现在主要用nodejs做后端了,所以记录一些上传文件的使用方法. 上传文件的主要方式: 1.form上传,优点是方便,缺点是没法回调,上传后返回的数据没法处理 2.ajax上传,优点是可控制,有回 ...

  7. 一个CSV文件解析类

    import java.io.BufferedReader; import java.io.FileReader; import java.util.ArrayList; import java.ut ...

  8. CentOS 7 Flannel的安装与配置

    1. 安装前的准备 etcd 3.2.9 Docker 17.12.0-ce 三台机器10.100.97.236, 10.100.97.92, 10.100.97.81 etcd不同版本之间的差别还是 ...

  9. python跳坑---生成器

    贵有恒,何必三更眠五更起,最无益,只怕一日曝十日寒. 好多东西要写下来一是方便自己,二可以分享给大家,我却一拖再拖. 工作的时候看别人代码中间结果,跳了个坑,关于python generator类型: ...

  10. LinkServer--服务器选项

    1. RPC和RPC out 当RPC和RPC out被设置为true时,允许调用远程服务器的存储过程 2.为RPC启用针对分布式事务的升级 使用该选项可通过 Microsoft 分布式事务处理协调器 ...