css实现九宫格，不定宽高百分比（使用padding实现Div高度根据自适应宽度（百分比）调整）

css实现九宫格，但不一定有9个，可能有8个、7个，每两个格子间距是10px,一行放置3个格子，格子宽高比为1：2（最右的面试题）

 <div class="box"><div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div>
</div>

首先我们使用flex实现九宫格
1.父元素使用flex布局，项目自动换行

.box {width: 100%;display: flex;flex-wrap: wrap;border: 1px solid yellow;background: green;}

2.然后设置宽高和边距

.box>div {width: calc((100% - 20px) / 3);height: calc((100% - 20px) / 3 * 2) ;margin-right: 10px;border: 1px solid red;}

3.使用伪类选择器把最右边元素的margin去掉
:nth-child(n)选择器的作用是匹配属于其父元素的第N个子元素，不论元素的类型。n可以是数字、关键词或公式。

.box :nth-child(3n) { // 第3个第6个第9个的右边距去掉margin-bottom: 0
}

然后我们发现，宽高比1：2还没有不对呢，我上边所写的height也用calc去计算，想当然的也是用宽度去计算了，但是height:100%参考的父元素的高度呀，父元素高度是依靠子元素撑起来的，子元素高度又是由父元素计算的，这两个变成了相互依赖的关系，哈哈哈哈，我可真是个

css实现九宫格，不定宽高百分比（使用padding实现Div高度根据自适应宽度（百分比）调整）相关推荐

div 自定义拉宽_纯Css实现Div高度根据自适应宽度（百分比）调整
在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...
不定宽高，实现盒子左右垂直居中
html <div class="container"><div class="box">不定宽高实现左右垂直剧中</div> ...
不定宽高的div中文字垂直居中
最近公司的项目里面有个要调样式的页面 , 可能是很长很长时间没有写过css样式方面的东西了.吐槽一下我自己,只是一个简单的界面就让我苦恼了很久需求:在不定宽高的div中文字垂直居中 div1的宽高 ...
canva画图图片居中裁剪_css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果...
需求如下: 前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果,等比例正方形显示在列表中,让图片根据宽高来自适应显示在页面上.那么 ...
不定宽高的DIV，垂直水平居中
1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...
css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？
如图: 因为把当前的标签页缩放显示了,所以浏览器会渲染出非整数的盒子尺寸参考文章:css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数? - 孙北吉的回答 - 知乎
如何实现不定宽高的div水平垂直居中
如何实现不定宽高的div水平垂直居中第一个方法:我们使用定位给父元素positon:relative,定位到中间 div{ position:absolute; top: 50%; left: 50 ...
CSS学习笔记八——宽高自适应
宽高自适应一.宽度自适应二.高度自适应三.浮动元素的高度自适应四.窗口自适应五.结语一.宽度自适应不写宽度或者写 width:auto就表示宽度自适应,可用于横栏或导航栏. 与 widt ...
css控制图片拉伸不变形,css+background实现图片宽高自适应，拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...

css实现九宫格，不定宽高百分比（使用padding实现Div高度根据自适应宽度（百分比）调整）

css实现九宫格，不定宽高百分比（使用padding实现Div高度根据自适应宽度（百分比）调整）相关推荐

最新文章

热门文章