网页制作 
首页 > 网页制作 > 浏览文章

css等比例分割父级容器(完美三等分)的实现

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

父级容器的宽度一定,要实现子元素等比例完美均分父级宽度,实现方式有哪些?

html部分代码:

css等比例分割父级容器(完美三等分)的实现

方法一: 浮动布局+百分比

 (将子元素依次左浮动,根据子元素的个数,设定每个子元素的宽度百分比)

css等比例分割父级容器(完美三等分)的实现

方法二:行内元素(inline-block)+百分比

css等比例分割父级容器(完美三等分)的实现

方法三: 父元素  display:table  +  子元素   display:table-cell

css等比例分割父级容器(完美三等分)的实现

方法四: css3  display:flex;(flex布局)

css等比例分割父级容器(完美三等分)的实现

方法五:栅格系统(bootstrap)

给子元素添加class属性  class=“col-md-3”

以上五种方法都可以实现父元素容器的三等分均分,但是前两种根据百分比的方法并不能实现完美的三等分,因为百分比是一个不准确的估算值,同时如果子元素有边框的情况下,很难均分。

优先使用后三种方法

上一篇:详解css3中dispaly的Grid布局与Flex布局
下一篇:详解如何使用CSS选择所有子元素
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap