将具有百分比宽度的 div 与以像素为单位的边距相结合答案

【问题标题】：Combine divs with percentage width with margin in pixels将具有百分比宽度的 div 与以像素为单位的边距相结合
【发布时间】：2015-03-23 21:12:57
【问题描述】：

我有一个包含多个项目的页面，它们有 33.33% 的宽度来填满页面的整个宽度。但是，我想在项目之间添加 20px 的边距（垂直和水平，但这里的问题是垂直），但只需在每行的第一个和第二个项目的右侧添加 20px 的边距，就会破坏整个页面。（从小提琴中删除注释掉的 CSS 以了解我的意思）。

JSfiddle

现在，问题是：如何添加 20px 边距并确保所有 .item div 保持相同大小？我可以使用宽度的百分比并将删除的 .item 宽度添加为边距，但这永远不会是稳定的 20 像素，因为它是百分比。

HTML

<div id="main">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">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;
}*/

【问题讨论】：

不要使用margin，而是使用padding。还要确保你在所有元素上使用box-sizing: border-box。
@RobScott 你能解释一下我为什么要添加box-sizing吗？我以前从未见过。编辑：好的，盒子大小很聪明，谢谢，对将来的参考也很有用。在我的情况下，填充不是一种选择。
jsfiddle.net/3856h9e2这是你想要的结果吗？
@TusharGupta 是的，这正是我所需要的，谢谢！如果您将其添加为答案，我会接受。
@Rvervuurt box-sizing 使得当您定义 width 时，它会添加到帐户 margin, padding, and borders 中。没有它，你的宽度并不是你期望的那样

标签： html css

【解决方案1】：

您可以使用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 并未从所有元素中减去）。更好的解决方案是从所有元素中减去 13.33px (40px/3px)：

Updated Example

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

【讨论】：

这里的问题是.items 的第三行与第一和第二行的宽度不同。我想如果我编辑边距是可能的，它会从每行中删除均匀（尽可能均匀）数量的像素，但这似乎不是最聪明的。
这些年做开发，我从来不知道这个？
这很棒。解决了我的问题。感谢分享。

【解决方案2】：

更改每个.item 类的宽度并使用calc() 进行计算

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

Fiddle

【讨论】：

这与我 10 分钟前发布的答案有何不同？
嗯，我看到的唯一区别是它们都具有相同的宽度，但错过了第三行也得到了margin-right。您更新的答案更好@JoshCrozier
我认为你可以找到不同之处......而且 OP 说小提琴是需要的，所以我把它作为答案

【解决方案3】：

您可以使用% 进行包装，并在使用box-sizing: border-box 时将边距更改为填充

.wrapper {
  /* enable to add padding to width */
  box-sizing: border-box;
  width: 33.33%;
  float: left;
  padding: 20px;
  background-color: #EFEFEF;
}
.item {
  background-color: #ddd;
  padding: 5px;
}

<div class="wrapper">
  <div class="item">Some thext here</div>
</div>
<div class="wrapper">
  <div class="item">Some thext here</div>
</div>
<div class="wrapper">
  <div class="item">Some thext here</div>
</div>

【讨论】：

我应该提到我无权访问 HTML 部分。
不确定是不是拼写错误，但是 xt -> text ?
@jbutler483 是的，错字，但没有区别