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

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

html部分代码:

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

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

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

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

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

方法五:栅格系统(bootstrap)

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

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

后三种方法优先使用

原文地址:https://www.cnblogs.com/zmdComeOn/p/11061323.html

时间: 2024-10-21 04:35:25

css等比例分割父级容器(完美三等分)的相关文章

[前端]如何让图片等比例缩放,同时撑满父级容器的长或宽

[前端]如何让图片等比例缩放,同时撑满父级容器的长或宽 最近碰到一个问题,如何在一个容器里同时放一张图片,而这张图片会等比例缩放,长或宽会跟着父级容器的长或宽一致. 找了一段时间,发现了 css3 中有这个属性: object-fit: contain; 具体怎么使用:见这篇文章 半深入理解CSS3 object-position/object-fit属性 完 原文地址:https://www.cnblogs.com/htoooth/p/8676274.html

width:100%与绝对定位同时存在,偏移出父级容器

当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面 出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个子元素就有多宽,所以子元素跑到了父级容器外 html <div class="container"> <div class="content">好的</div> </div> css .container { positi

解决子级用css float浮动 而父级div没高度不能自适应高度

解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML源代码: <!DOCTYPE html> <html> <head> <meta cha

子级用css float浮动 而父级div没高度不能自适应高度

子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>父div不自适应高度实例</title> <style> .divcss5{width:500px;border:1px solid #0

CSS清除浮动使父级元素展开的三个方法

点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开. 举个例子,有一个div容器,div容器里有两个小容器,分别向左和向右浮动,为了区别这三个容器,分别设置了不同颜色的边框. 复制代码 代码如下: <html> <h

position:fixed相对父级元素定位而不是浏览器

position:fixed默认是相对浏览器定位的 原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位 代码:http://jsbin.com/tegodideyi/edit?html,css,output HTML布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="view

&lt;转载&gt;如何解决子级用float浮动父级div高度不能自适应的问题

转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML

css 实现 左右div 等高, 同时父级div就是最高的子div的高度.

方法一: 通过父级overflow:hidden,  自己设置padding-bottom 和 margin-bottom来实现. 1 #wrap{ 2 overflow:hidden; 3 width:1000px; 4 margin:0 auto; 5 } 6 #left,#center{ 7 margin-bottom:-10000px; 8 padding-bottom:10000px; 9 } 10 #left{ 11 float:left; 12 width:250px; 13 ba

knockout 无容器绑定,多重foreach,获取当前 索引 父级索引

在使用knockout过程中 发现jquery tmpl  在循环上性能很差.经过多方查询得知 knockout 其实有 自己的 无容器绑定. 那么废话少说现在开始. 1.后台模型展示 为了构建更生动的数据源我们先声明一个类,起名叫 User 这个类的接口一眼就看穿了,需要注意的地方就是 每个User 都有一个 UserFriends的集合. using System; using System.Collections.Generic; using System.Linq; using Syst