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. 亚马逊与Twitter携手电子商务

    亚马逊(Amazon)与Twitter开展了合作,允许用户以Twitter消息的形式将喜欢的商品发送到购物篮中.这些高科技企业正在想办法把社交媒体和电子商务融为一体. 这一功能旨在将Twitter转变 ...

  2. windows64系统下安装 redis服务 （详细）

    Linux下Redis安装链接 :     转到 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表) ...

  3. Spring演示及总结

    一.目标 二.分工 三.回顾 发现问题: 第一个冲刺的任务以基本完成,但队友的状态相对有些疲软,主要原因可能是这两周有好几个课程大作业要赶, 有的队友还要为比赛做准备,及做一些其他是项目,时间较紧,有 ...

  4. Scrum立会报告+燃尽图（十一月二十五日总第三十三次）：展示博客

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2413 项目地址:https://git.coding.net/zhang ...

  5. 【Alpha】阶段第一次Scrum Meeting

    [Alpha]阶段第一次Scrum Meeting 工作情况 团队成员 今日已完成任务 明日待完成任务 刘峻辰 后端接口开发 测试接口,修正bug 赵智源 撰写测试方案书 部署实际任务和编写测试样例 ...

  6. ios framework 使用图片资源

    framework 的制作工程见:http://www.cocoachina.com/ios/20141126/10322.html: 遇到问题: 由于自己的framework 要使用图片资源,最后找 ...

  7. mnist测试

    第一步:进入caffe目录 第二步:获取mnist数据集 ./data/mnist/get_mnist.sh 第三步:创建lmdb ./examples/mnist/create_mnist.sh 第 ...

  8. 【转载】mysql建表date类型不能设置默认值

    如题,mysql建表date类型的不能设置一个默认值,比如我这样: CREATE TABLE `new_table` ( `biryhday` datetime NULL DEFAULT '1996- ...

  9. Centos上Apache重启,mysql重启,nginx重启方法

    转载:http://www.3lian.com/edu/2012/04-01/24278.html Centos上Apache重启,mysql重启, nginx 重启方法 1.重启 apache se ...

  10. 第74天：jQuery实现图片导航效果

    图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...