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. 对MVC模型的自悟，详尽解释，为了更多非计算机人员可以理解

    今天小编在复习之前刚刚学会的一个小项目,然后突然对MVC有了新的理解,决定迅速将其写成文档,否则可能会忘记,就算是一个顿悟,学了java语言好久了,刚刚才对其有了比较深入的理解,希望对于同样的人能够有 ...

  2. 对于Serializable id类型的数据的测试

    今天编写了一个这样的例子,然后进行了Junit测试,但是发现类型总是不匹配,最后测出如下 public <T> void deleteEntry(Class<T> t, Ser ...

  3. BSD Socket 通信

    Berkeley sockets is an application programming interface (API) for Internet sockets and Unix domain ...

  4. matlab练习程序（生成希尔伯特曲线）

    能够使用这样一条线遍历图像中所有的像素,不过这里没有这样做,而只是生成了这样一条曲线. 程序中h,w是最终图像的高和宽,n为希尔伯特曲线阶数. 这里如果n等于log2(h)或log2(w),则图像就全 ...

  5. Linux中的LVM和软RAID

        在实际工作中,会经常碰到所给的服务器硬盘容量太小,而实际的应用软件中却需要一个容量较大的分区进行数据存储等,除了通过硬件RAID卡来实现合并多硬盘外,其实我们也可以通过软件的方式来实现. 实验 ...

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

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

  7. hdu1002 A + B Problem II(高精度加法) 2016-05-19 12:00 106人阅读 评论(0) 收藏

    A + B Problem II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  8. Hdu1896 Stones(优先队列) 2017-01-17 13:07 40人阅读 评论(0) 收藏

    Stones Time Limit : 5000/3000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submis ...

  9. hibernate中常用的Hql语句总结

    // HQL: Hibernate Query Language. // 特点: // >> 1,与SQL相似,SQL中的语法基本上都可以直接使用. // >> 2,SQL查询 ...

  10. WPF/Silverlight开发的15个最佳实践(转发)

    英文出处:http://www.kunal-chowdhury.com/2010/08/some-best-practices-for-silverlight.html 作者:Kunal Chowdh ...