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

概述我有一个包含多个项目的页面,其宽度为33.33％,以填充页面的整个宽度.但是,我想在项目之间添加20px的边距(垂直和水平,但垂直是这里的问题),但只是在连续的每个第1和第2项的右边添加20px边距,销毁整个页面. (从小提琴中删除已注释掉的CSS,看看我的意思). JSfiddle 现在,问题是：如何添加20px的保证金并确保所有.item div保持相同的大小？我可以使用宽度的百分比并添加.i 我有一个包含多个项目的页面,其宽度为33.33％,以填充页面的整个宽度.但是,我想在项目之间添加20px的边距(垂直和水平,但垂直是这里的问题),但只是在连续的每个第1和第2项的右边添加20px边距,销毁整个页面. (从小提琴中删除已注释掉的CSS,看看我的意思).

JSfiddle

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

HTML

<div ID="main">    <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 >9</div>    <div >10</div>    <div >11</div>    <div >12</div></div>

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;}*/

解决方法 您可以使用 calc()从33.33％中减去20px.

在这种情况下,您将使用wIDth：calc(33.33％ – 20px)来替换边距.

Updated Example

#main .item:nth-child(3n+1),#main .item:nth-child(3n+2) {    wIDth: calc(33.33% - 20px);    margin-right: 20px;}

不幸的是,这将导致宽度不同的元素(因为没有从所有元素中减去20px).更好的解决方案是从所有元素(40px / 3px)中减去13.33px：

Updated Example

#main .item {    height: 100px;    wIDth: calc(33.33% - 13.33px);    float:left;    text-align: center;}

总结

以上是内存溢出为你收集整理的html – 将百分比宽度与边距(以像素为单位)组合起来全部内容，希望文章能够帮你解决html – 将百分比宽度与边距(以像素为单位)组合起来所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。