css等比例分割父级容器(完美三等分)
html部分代码:
方法一: 浮动布局+百分比
(将子元素依次左浮动,根据子元素的个数,设定每个子元素的宽度百分比)
方法二:行内元素(inline-block)+百分比
方法三: 父元素 display:table + 子元素 display:table-cell
方法四: css3 display:flex;(flex布局)
方法五:栅格系统(bootstrap)
给子元素添加class属性 class=“col-md-3”
以上五种方法都可以实现父元素容器的三等分均分,但是前两种根据百分比的方法并不能实现完美的三等分,因为百分比是一个不准确的估算值,同时如果子元素有边框的情况下,很难均分。
优先使用后三种方法
css等比例分割父级容器(完美三等分)的更多相关文章
- width:100%与绝对定位同时存在,偏移出父级容器
当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面 出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个 ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
- 子级用css float浮动 而父级div没高度不能自适应高度
子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...
- 子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...
- CSS清除浮动使父级元素展开的三个方法
点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有 ...
- 关于子元素的margin-top对父级容器无效
如果不想看那么长,看下面这句话就好了. 刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决,发现该方式并不好.亲测给父级加一个overflow不为visiable的属性就直接解决了 ...
- 解决子元素用css float浮动后父级元素高度自适应高度
1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...
- overflow-x scroll 内部元素滚动,父级容器代码
display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling: touch;
随机推荐
- [T-ARA/筷子兄弟][Little Apple]
歌词来源:http://music.163.com/#/song?id=29753511 作曲 : 筷子兄弟 [作曲 : 筷子兄弟] 作词 : K-Smith [作词 : KSmith] 编曲 : 新 ...
- Beta阶段第2周/共2周 Scrum立会报告+燃尽图 04
此作业要求参见https://edu.cnblogs.com/campus/nenu/2018fall/homework/2412 版本控制地址 [https://git.coding.net/ ...
- Beta阶段第二次网络会议
Beta阶段第二次网络会议 第一次会议问题解决情况 画面问题已经解决,游戏提示信息已加入完成 不同情况下背景已加入完成,但细节部分仍需要进行调整 科技树添加完成,权限修改完成,还存在部分细节调整 AI ...
- FIsherman丶Team
小组成员:郝恒杰,洪佳兴,张子祥 组长:郝恒杰 项目:Fisher Job(渔夫兼职) 简介: 我们的产品渔夫兼职是为了解决大学生兼职群体 的痛苦,他们需要一个好的渠道去找一个让自己满意的兼职,但是现 ...
- HDU 5875 Function 优先队列+离线
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5875 Function Time Limit: 7000/3500 MS (Java/Others) ...
- HDU 5206 Four Inages Strategy 水题
题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5206 bc(中文):http://bestcoder.hdu.edu.cn/contests ...
- 青岛 2016ICPC 区域现场赛题目
A. Relic Discovery B. Pocket Cube C. Pocky D. Lucky Coins E. Fibonacci F. Lambda Calculus G. Coding ...
- 单机安装 consul ui 对外提供服务
Consul 安装启动ui,外网无法访问,应为Consul 默认绑定127.0.0.1 ,所以外网无法访问. 通过设置 -client 参数来设置 consul agent -server - ...
- RabbitMQ 安装,配置
1:安装 yum install -y rabbitmq-server 2:主要程序介绍 # 管理插件的程序 /usr/sbin/rabbitmq-plugins # 服务程序 /usr/sbin ...
- Binlog的三种模式
binlog模式分三种(row,statement,mixed) 1.Row 日志中会记录成每一行数据被修改的形式,然后在slave端再对相同的数据进行修改,只记录要修改的数据,只有value,不会有 ...