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. presto 配置mysql.properties异常Database (catalog) must not be specified in JDBC URL for MySQL connector

    在presto 0.210 以后配置mysql.properties的时候,对于jdbc-url属性配置后面要加上对应要链接的database connection-url=jdbc:mysql:// ...

  2. CF刷刷水题找自信 2

    CF 1114A  Got Any Grapes(葡萄)? 题目意思:给三个人分葡萄,三个人对葡萄的颜色有一些要求,问所准备的三种颜色的葡萄能否满足三人的要求. 解题意思:直接按条件判断即可. #in ...

  3. win10与linux双系统切换时间不一致的调整

    按照Linux系统之后再切换回到win10后,我发现win10的时间不再是北京时间,而是比北京时间多了整整8小时,之后百度找到了问题来源,这里给出解决方法. 如果安装了 Windows 和 Linux ...

  4. Croc Champ 2013 - Round 1 E. Copying Data 线段树

    题目链接: http://codeforces.com/problemset/problem/292/E E. Copying Data time limit per test2 secondsmem ...

  5. springboot+vue+element：echarts开发遇见问题---vue前端(二)

    <template> <u-grid> <u-grid-item caption="服务使用统计排行"> <div class=" ...

  6. springMVC 流程

    springMVC流程控制 SpringMVC流程 web.xml 中配置 org.springframework.web.servlet.DispatcherServlet 这一步其实和spring ...

  7. 【week11】回顾

    一.回答五个问题 第一次阅读<构建之法>之后的五个问题: 1.关于敏捷,书中说了我理解的就是介绍了敏捷就是“没有既定的计划与文档,马上写代码,随时发牢骚”,但是开发也是需要有一定的流程的, ...

  8. Jmeter 中JDBC request 详解 ！

    JDBC Request: 这个sampler可以向数据库发送一个jdbc请求(sql语句),它经常需要和JDBC Connection Configuration 配置元件一起配合使用. 目录: 一 ...

  9. Django之ORM对数据库操作

    基本操作 <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 <3> get(**kwargs): ...

  10. Spring 学习 5- task 定时任务

    Spring-Task 1.这是网上的: 后面是我自己的配置 Spring3.0以后自主开发的定时任务工具,spring task,可以将它比作一个轻量级的Quartz,而且使用起来很简单,除spri ...