Question

目前我这样做：

.column-33 {
    width: 32%;
    float:left;
}

我想将宽度更改为33.33％，但我的项目样式如下：

.news-collection-item {
    margin: 0px 5px;
}

所以当宽度设置为33.33％时，只会有2个项目在线。处理这个问题的正确方法是什么？

Answer 1

像素和百分比不是这样兼容的。使用其中一个，在这种情况下为百分比。

.column-33 {width: 32%; float: left;}
.column-33 + .column-33 {margin-left: 2%;} /* set to 2nd and 3rd col left margin */
/* OR .column-33:nth-child(3n+2), .column-33:nth-child(3n) {} if you have more than 3 columns  */

Answer 2

设置宽度时，边距将会增加。

在您的例子中，您的列宽为33.33％+ 10px（每边5px）。但1％是可变的（如果容器宽度为100px则为1px，如果容器宽度为300px则为3px），5px总是为5％。

所以你需要混合相对和绝对价值，不要担心，当我需要这样做时，我会这样做：

<div class='column-33'>
  <div class='inner'>
    Content
  </div>
</div>
<div class='column-33'>
  <div class='inner'>
    Content
  </div>
</div>
<div class='column-33'>
  <div class='inner'>
    Content
  </div>
</div>

使用这个CSS：

.column-33 {
  width: 32%;
  float:left;
}
.column-33 .inner{
  margin: 0px 5px;
}

Answer 3

你能不能只覆盖.column-33中的边距设置，将其设置为0.我相信你想在页面上并排显示3个div。边距导致第3个div被强制到第二行。删除/重新定义类应该有所帮助。

Answer 4

我不得不反驳黑豹的答案。

像素值和百分比值实际上可以与calc() CSS函数一起使用，这也是supported by most browsers

所以你可以把它写成width: calc(33% - 2px)，模数供应商前缀。

如何在div之间正确创建偏移量

4 个答案: