css等比例分割父级容器（完美三等分）

最新推荐文章于 2023-08-07 00:45:02 发布
最新推荐文章于 2023-08-07 00:45:02 发布
阅读量7.7w 收藏 32
点赞数 5
CC 4.0 BY-SA版权
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaobing_hope/article/details/51285695
本文介绍了五种实现CSS等比例分割父级容器的方法，包括浮动布局+百分比、行内元素+百分比、display:table/table-cell、Flex布局及Bootstrap栅格系统。详细对比了这些方法的特点，并推荐了更加精确的后三种方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

css等比例分割父级容器（完美三等分）

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

html部分代码：



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

 （将子元素依次左浮动，根据子元素的个数，设定每个子元素的宽度百分比）


方法二：行内元素（inline-block）+百分比



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



方法四： css3  display:flex；（flex布局）



方法五：栅格系统（bootstrap）

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


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

优先使用后三种方法






使用CSS Grid实现等分布局的最佳实践
weixin_41455464的博客
06-29 286
总而言之，CSS Grid是一个强大的布局工具，可以帮助我们轻松地创建各种复杂的等分布局。它就像一个智能烤箱，能够自动地将网页元素排列到网格中，并根据屏幕尺寸进行调整。掌握Grid的基本概念和常用属性，可以让我们告别繁琐的计算和hack，专注于内容的呈现。下次再遇到等分布局的需求，不妨试试Grid，相信它会给你带来惊喜。希望这篇文章能帮助你更好地理解和使用CSS Grid。记住，烤面包的关键在于掌握火候，而玩转Grid的关键在于理解它的规则。多尝试、多实践，你也能成为布局大师！
前端面试的话术集锦第 25 篇博文——CSS面试题上
念兮为美
04-19 162
介绍标准CSS盒子模型与低版本IE的盒子模型不同。box-sizing属性。CSS选择器的属性和能够继承的属性。css优先级算法。CSS3新增伪类。居中div、居中浮动元素、绝对定位的div居中。display的值及作用。position的值。CSS3新特性。解释CSS3的flexbox（弹性盒布局模型）以及适用场景。纯CSS创建一个三角形的原理。满屏品字布局设计。常见的兼容性问题。为什么初始化CSS样式。containing block计算方式跟正常流有什么不同。
纯css3实现栏目三等平均分配
06-12
效果描述： 本效果主要介绍的是一个方法 用一种看起来很高级的方式实现你的div三等分 使用方法： 1、将head中的样式引入到你的样式表中 2、将body中需要的代码部分拷贝过去即可
CSS布局自适应等分比例实践
hyb1234hi的专栏
08-08 729
CSS等比例划分，在CSS布局中是比较重要的，下面分享几种常用方法和探讨一下兼容性。 一：浮动布局+百分比 emmet html代码：ul.float-ul>li*5>.con>h3{等分标题}+p{等分内容等分内容} .float-ul{width: 100%; overflow: hidden; zoom: 1;} .float-ul li{float: left; width: 2
【CSS】flex 实现三栏等分布局
leo的博客
04-12 6370
flex 实现三栏等分布局
css等比例分割父级容器（完美三等分）的实现
11-19
父级容器的宽度一定，要实现子元素等比例完美均分父级宽度，实现方式有哪些？
CSS实现等分布局的4种方式
weixin_40372161的博客
07-05 5335
思路一: float缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差【1】float + padding + background-clip使用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背景CSS Code复制内容到剪贴板<style>   body,p{margin: 0;}   .paren...
使用CSS3实现环形进度条效果
12-07
3. **绘制环形**：在每个矩形内部再画一个与父级方形等大的方形，通过设置不同的边框宽度和颜色来呈现环形。左半部分的环形只需设置上边框和左边框，右半部分的环形则设置上边框和右边框。 4. **实现动态百分比**：...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7194
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
样式表（Style Sheets）CSS 语言基础 CSS Pocket Reference
AI天才研究院
08-07 1001
样式表（Style Sheets）语言是用于描述HTML或XML文档呈现方式的一门语言。CSS允许用户通过网页浏览器设置文本的颜色、字体、大小、样式、边框、透明度等。CSS本身独立于HTML和XML之外，因此可以有效地保障网站的可用性及易读性。本文提供一个CSS快速参考，帮助初级CSS开发人员了解其常用属性及语法规则，并可以在实际工作中使用，提高工作效率。对CSS不是很熟悉，但是想学习一下；有一定前端基础但没有掌握所有的CSS知识；想提升自己的CSS水平；需要一份详实的CSS速查手册。
浅谈CSS等比例分割父级容器
筱葭的博客
03-15 1357
以三等分为例： 方法一：浮动布局+百分比 .parent{ width:600px; height:600px; } .child{ width:33.3%; height:100%; float:left; }   方法二：父元素display:table+ 子元素display:table
CSS3 grid布局
blue_sky的博客
04-03 2066
前提：现在Grid布局基本主流的浏览器都支持， CSS3 Grid Layout是一个新的模块，这个模块主要定义一个二维网格布局系统，用来优化用户界面设计。在这个网格布局模块中，网格容器的所有子元素可以在一个灵活的或者固定的了布局网格中定位到任意槽中 一、 简要 Grid翻译成中文为“栅格”，用过bootstrap、semantic ui、ant design应该了解grid...
父元素宽度一定，子元素完美均分父级宽度
智韬的博客
12-13 5106
我们都是爱美的生物，大多数要求对一个东西进行分割时，我们都会尽可能的均分它。在页面中，一个div盒子有的固定像素宽度，有的为百分比。如何能很好的均分一个div呢？ 以下将提供五个均分父元素的方法,其中 方法四flex布局为常用 先提供原始代码及其展示： 为了展示有所区别，便于观察，添加了padding，不同的子元素添加不同的border颜色 html: <div class = "far...
css把一个元素分成三等分
qq_43405603的博客
11-18 528
css把一个元素分成三等分
实现CSS等分布局的5种方式
xcj_20160810的博客
05-08 2253
　等分布局是指子元素平均分配父元素宽度的布局方式下面列出6种常见的方式，仅供参考 float 【思路一】float 　　缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差 【1】float + padding + background-clip 　　使用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背...
css伸缩布局三等份
天蓝蓝风轻轻
06-11 848
传统布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
css 实现三个 div 等分排在一行
热门推荐
且听风吟的博客
11-15 1万+
（1）box-sizing: border-box;实现： <!DOCTYPE html> <html> <head> <title>border-box 实现三个div等分排在一行</title> <style> *{ padding:0; margin:0; } .container { ...
css实现三列图片等宽等间距排列
weixin_44185143的博客
11-27 5942
文章目录方法1.设置浮动和外间距方法2.用弹性盒子方法3.用多列布局 方法1.设置浮动和外间距 每个图片设置左浮动，宽度30%，左外间距2.5%。 100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5% <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三列图片等间距排列</title> &l
vue v-for实现多行等分布局-三等分
A873054267的博客
08-16 7877
关键在于容器元素的指定和项目元素。 容器元素要在for之外，项目元素在for之内 <div class="wrapper"> <div class="wrapper-content" v-for="(resultListitem,resultListindex) in resultList"> <barchart titles="项目规划名称1" sta...
css grid
最新发布
05-01
### CSS Grid 布局教程与使用示例 #### 1. CSS Grid 基本概念 CSS Grid 是一种用于二维布局的系统，允许开发者精确地控制页面上的行列分布。它是一种强大的工具，能够解决传统浮动和 Flexbox 难以处理的复杂布局问题[^1]。 #### 2. 创建基本的 Grid 容器 要启用 Grid 布局，需将父级容器的 `display` 属性设置为 `grid` 或 `inline-grid`。以下是创建一个基础 Grid 的方法： ```css .container { display: grid; } ``` 此代码片段会将 `.container` 转换为一个网格容器[^5]。 #### 3. 定义网格列和行 通过 `grid-template-columns` 和 `grid-template-rows` 属性可以分别定义网格中的列宽和行高。例如： ```css .container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* 列比例分别为 1:2:1 */ grid-template-rows: 100px 200px 100px; /* 行高度固定 */ gap: 10px; /* 设置行间和列间的间隔 */ } ``` 这里，`gap` 属性用来指定网格项之间的间距[^3]。 #### 4. 单元格定位 可以通过 `grid-column` 和 `grid-row` 来精确定位某个子元素的位置。例如： ```css .item1 { grid-column: 1 / 3; /* 从第1列跨越至第3列前 */ grid-row: 1 / 2; /* 位于第1行 */ } .item2 { grid-column: 2 / 3; grid-row: 2 / 3; } ``` 这种语法使得单元格可以在任意位置放置并跨多个区域[^4]。 #### 5. 响应式布局支持 利用 `fr` 单位可轻松实现响应式的等比分割。当视口大小变化时，各部分的比例保持不变。例如： ```css .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); /* 动态生成三列，每列占总宽度的三分之一 */ grid-gap: 20px; } ``` 这段代码展示了如何动态调整列数以及它们所占据的空间份额[^2]。 #### 6. 综合实例 下面是一个完整的 HTML 结构及其对应的样式表来展示以上知识点的应用场景： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Grid Example</title> <style> .grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 100px 200px 100px; gap: 10px; width: 600px; margin: 50px auto; border: 1px solid black; } .item { background-color: lightblue; text-align: center; padding: 20px; font-size: 20px; } .item1 { grid-area: 1 / 1 / 2 / 3; } /* 跨越第一第二列 */ .item2 { grid-area: 2 / 2 / 3 / 3; } .item3 { grid-area: 2 / 3 / 3 / 4; } </style> </head> <body> <div class="grid-container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div> </body> </html> ``` 这个例子综合运用了前面提到的各种技巧，包括但不限于显式设定行列尺寸、应用间隙参数以及自定义项目覆盖范围等功能特性[^5]。 ---
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值