html部分代码：

方法一： 浮动布局+百分比

（将子元素依次左浮动，根据子元素的个数，设定每个子元素的宽度百分比）

方法二：行内元素（inline-block）+百分比

方法三： 父元素  display:table  +  子元素   display:table-cell

方法四： css3  display:flex；（flex布局）

方法五：栅格系统（bootstrap）

给子元素添加class属性                class=“col-md-3”

以上五种方法都可以实现父元素容器的三等分均分，但是前两种根据百分比的方法并不能实现完美的三等分，因为百分比是一个不准确的估算值，同时如果子元素有边框的情况下，很难均分。

优先使用后三种方法

css等比例分割父级容器（完美三等分）的更多相关文章

  1. width:100%与绝对定位同时存在，偏移出父级容器

    当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面 出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个 ...

  2. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  3. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  4. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  5. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  6. CSS清除浮动使父级元素展开的三个方法

    点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有 ...

  7. 关于子元素的margin-top对父级容器无效

    如果不想看那么长,看下面这句话就好了. 刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决,发现该方式并不好.亲测给父级加一个overflow不为visiable的属性就直接解决了 ...

  8. 解决子元素用css float浮动后父级元素高度自适应高度

    1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...

  9. overflow-x scroll 内部元素滚动,父级容器代码

    display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling: touch;

随机推荐

  1. Numpy入门笔记第一天

    # 导入包 import numpy as np # 创建一维数组 a = np.arange(5) print "一维numpy数组", a print "数组的类型& ...

  2. Python3 函数式编程自带函数

    一 map函数 引子 需求1:num1=[1,2,3,4],我的需求是把num1中的每个元素平方后组成新列表. ret = [] num1 = [1,2,3,4] for i in num1: ret ...

  3. Numpy and Pandas

    安装 视频链接:https://morvanzhou.github.io/tutorials/data-manipulation/np-pd/ pip install numpy pip instal ...

  4. lintcode-407-加一

    407-加一 给定一个非负数,表示一个数字数组,在该数的基础上+1,返回一个新的数组. 该数字按照大小进行排列,最大的数在列表的最前面. 样例 给定 [1,2,3] 表示 123, 返回 [1,2,4 ...

  5. 解释Spring中IOC, DI, AOP

    oc就是控制翻转或是依赖注入.通俗的讲就是如果在什么地方需要一个对象,你自己不用去通过new 生成你需要的对象,而是通过spring的bean工厂为你长生这样一个对象.aop就是面向切面的编程.比如说 ...

  6. jQuery之元素查找

    在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签1. children(): 子标签中找2. find() : 后代标签中找3. parent() : 父标签4. prevAll() : 前 ...

  7. 多tab点击切换

    现在来一个小练习,就是用js实现多tab之间的切换: <body> <ul id="tab"> <li id="tab1"> ...

  8. ping（团队作业）

    一,团队成员 何守成 031602408(队长) 黄锦峰 031602411 肖逸清 031602435 张子纯 031602441 蔡志斌 031602602 柯叶祥 031602414 二.作业链 ...

  9. php 计算本周星期一、本月第一天 本月最后一天 下个月第一天

    本周一echo date('Y-m-d',(time()-((date('w')==0?7:date('w'))-1)*24*3600)); //w为星期几的数字形式,这里0为周日 本周日 echo  ...

  10. 分布式架构核心RPC原理

    在应用的迭代演进过程中,随着系统访问量提高,业务复杂度提高,代码复杂度提高,应用逐渐从单体式架构向面向服务的分布式架构转变.RPC(Remote Procedure Call Protocol远程过程 ...