html 像素跟百分比,html – 将百分比宽度与边距(以像素为单位)组合起来

我有一个包含多个项目的页面,其宽度为33.33％,以填充页面的整个宽度.但是,我想在项目之间添加20px的边距(垂直和水平,但垂直是这里的问题),但只是在连续的每个第1和第2项的右边添加20px边距,销毁整个页面. (从小提琴中删除已注释掉的CSS,看看我的意思).

现在,问题是：如何添加20px的保证金并确保所有.item div保持相同的大小？我可以使用宽度的百分比并添加.item的移除宽度作为边距,但这绝不会是稳定的20px,因为它是百分比.

HTML

CSS

#main .item {

height: 100px;

width:33.33%;

float:left;

text-align: center;

}

#main .item:nth-child(3n+1) {

background: red;

}

#main .item:nth-child(3n+3) {

background: yellow;

}

#main .item:nth-child(3n+2) {

background:lightblue;

}

/*.item:nth-child(3n+1), .item:nth-child(3n+2) {

margin-right: 20px !important;

}*/

html 像素跟百分比,html – 将百分比宽度与边距(以像素为单位)组合起来相关推荐

css百分比定位和百分比尺寸
百分比尺寸子元素没有设置定位或定位为relative,则是百分比尺寸是相对于其父元素子元素设置了绝对定位,则百分比尺寸是相对于最近的定位了的祖先元素,如果没有则相对于视窗. 百分比定位: 只有设置 ...
开源人工智能算法一种新颖的超像素采样网络深层特征来估计任务特定的超像素
开源人工智能算法一种新颖的超像素采样网络深层特征来估计任务特定的超像素摘要: 超像素提供图像数据的有效低/中级表示,这极大地减少了后续视觉任务的图像基元的数量. 现有的超像素算法无法区分,因此难以集成 ...
halcon像素统计_Halcon学习（27-1）halcon测量技术：亚像素，亚像素精度
友发来两个小项目,要求亚像素精度.突然想问几个问题:1.何为亚像素?2.何为亚像素精度?3.使用亚像素测量,系统应注意什么? 1.何谓亚像素? 面阵摄像机的成像面以像素为最小单位.例如某CMOS摄像芯 ...
WPF 像素着色器入门：使用 Shazzam Shader Editor 编写 HLSL 像素着色器代码
HLSL,High Level Shader Language,高级着色器语言,是 Direct3D 着色器模型所必须的语言.WPF 支持 Direct3D 9,也支持使用 HLSL 来编写着色器.你 ...
css 宽度为百分比，高度和宽度相等的设置
工作中有一个需求, 一行四个图片(正方形的图片),但是我们又要让图片自适应, 不能使用 px 来设置宽度, 要使用百分比,比如上面一行四个图片, 图片的宽度,我们设置了25%, 高度呢,也设置25%吗 ...
margin-top/bottom(padding-top/bottom)百分比以祖级宽度计算
2019独角兽企业重金招聘Python工程师标准>>> 虽然这个不是见怪不怪的问题了,但是对于非专业前端来说,确实被愚弄了一番.还一味的以相对高度来控制元素之间的间距问题. http ...
html css百分比效果,css百分比不起作用是什么原因？
CSS 的单位对于 CSS 的值有是一个直接影响的.因为 CSS 的单位直接对 CSS 的值的计算是有直接影响的,但有时我们设置百分比值时会出现不起作用的情况,这是什么原因呢?我们该如何解决呢? 当我 ...
html电池百分比,显示电池百分比在哪设置
设置-通用-用量www.how234.com防采集. 随着科技的发展,智能手机的功能也越来越强大,但是智能手机有一个严重的缺点就是耗电快,为了更好的实时观测电量,你可以开启你的电池百分比,所以我就来教 ...
el-table列宽设置百分比无效；el-table使用min-width设置百分比；el-table百分比设置无效；
废话不多说,直接给每个el-table-column,设置 width="auto" min-width="25%"即可. 总的百分比还是要等于100%哈. 点 ...

html 像素跟百分比,html – 将百分比宽度与边距(以像素为单位)组合起来

html 像素跟百分比,html – 将百分比宽度与边距(以像素为单位)组合起来相关推荐

最新文章

热门文章