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. Office365创建通讯组

    Office365创建通讯组 命令 new-DistributionGroup -Name 'test' -Members tom@msazure.cn 结果 命令 new-DistributionG ...

  2. CDQ分治_占坑

    准备系统地学习一波CDQ分治,持续更新中... 首先,CDQ分治也还是分治的一种,只不过普通分治是独立的解决两个子问题,而CDQ分治还要计算第一个子问题对于第二个的影响. CDQ分治几乎都是用来解决多 ...

  3. C#判断字符串中是否有数字

    // <summary> /// 提取字符串中的数字字符串 /// </summary> /// <param name="str"></ ...

  4. asp.net mvc 使用Ajax调用Action 返回数据【转】

      使用asp.net mvc 调用Action方法很简单. 一.无参数方法. 1.首先,引入jquery-1.5.1.min.js 脚本,根据版本不同大家自行选择. <script src=& ...

  5. 博弈---ZOJ 2083 Win the Game(染绳子)

    原题:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2083 大意:两个人分别对n条绳子染 每次染m长 最后染不下的输,问先 ...

  6. C++ Primer Plus学习：第七章

    C++入门第七章:函数-C++的编程模块 函数的基本知识 要使用C++函数,必须完成如下工作: 提供函数定义 提供函数原型 调用函数 库函数是已经定义和编译好的函数,可使用标准库头文件提供原型. 定义 ...

  7. vue+postcss报错： variable '--primary-color' is undefined and used without a fallback

    之前vue-cli3引入postcss的配置: https://www.cnblogs.com/XHappyness/p/7676680.html 发现这么一个问题,我再全局global.css中定义 ...

  8. C 语言疑难杂症 [转：http://blog.chinaunix.net/uid-20688544-id-1894880.html]

    无聊在网上找了些C语言的东东练一下手,竟然发现其实还有好多细节之前,没注意到,该好好复习一下先. 解决掉的问题先不发出来,把疑问的先做个笔记,过几天解决了就回来修改补上.   #include < ...

  9. ADO之command

    connection      command对象使用的数据库连接 commandText     执行的SQL语句 ExecuteNonQuery  执行不返回行的语句,如UPDATE等 Execu ...

  10. SQL中的declare用法

    平时写SQL查询.存储过程都是凭着感觉来,没有探究过SQL的具体语法,一直都是按c#那一套往SQL上模仿,前几天项目中碰到一个问题引起了我对declare定义变量的作用域的兴趣. 大家都知道c#中的局 ...