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. [T-ARA/筷子兄弟][Little Apple]

    歌词来源:http://music.163.com/#/song?id=29753511 作曲 : 筷子兄弟 [作曲 : 筷子兄弟] 作词 : K-Smith [作词 : KSmith] 编曲 : 新 ...

  2. Beta阶段第2周/共2周 Scrum立会报告+燃尽图 04

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2018fall/homework/2412 版本控制地址    [https://git.coding.net/ ...

  3. Beta阶段第二次网络会议

    Beta阶段第二次网络会议 第一次会议问题解决情况 画面问题已经解决,游戏提示信息已加入完成 不同情况下背景已加入完成,但细节部分仍需要进行调整 科技树添加完成,权限修改完成,还存在部分细节调整 AI ...

  4. FIsherman丶Team

    小组成员:郝恒杰,洪佳兴,张子祥 组长:郝恒杰 项目:Fisher Job(渔夫兼职) 简介: 我们的产品渔夫兼职是为了解决大学生兼职群体 的痛苦,他们需要一个好的渠道去找一个让自己满意的兼职,但是现 ...

  5. HDU 5875 Function 优先队列+离线

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5875 Function Time Limit: 7000/3500 MS (Java/Others) ...

  6. HDU 5206 Four Inages Strategy 水题

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5206 bc(中文):http://bestcoder.hdu.edu.cn/contests ...

  7. 青岛 2016ICPC 区域现场赛题目

    A. Relic Discovery B. Pocket Cube C. Pocky D. Lucky Coins E. Fibonacci F. Lambda Calculus G. Coding ...

  8. 单机安装 consul ui 对外提供服务

    Consul 安装启动ui,外网无法访问,应为Consul 默认绑定127.0.0.1 ,所以外网无法访问. 通过设置 -client 参数来设置     consul agent -server - ...

  9. RabbitMQ 安装,配置

    1:安装 yum install -y rabbitmq-server   2:主要程序介绍 # 管理插件的程序 /usr/sbin/rabbitmq-plugins # 服务程序 /usr/sbin ...

  10. Binlog的三种模式

    binlog模式分三种(row,statement,mixed) 1.Row 日志中会记录成每一行数据被修改的形式,然后在slave端再对相同的数据进行修改,只记录要修改的数据,只有value,不会有 ...