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

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。边距导致第三个 div 被强制到第二行。删除 it/redefining 和类应该会有帮助。

Answer 4

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

像素值和百分比值实际上可以与 calc() CSS function, which is also supported by most browsers

一起使用

因此您可以将其写成 width: calc(33% - 2px)，取模供应商前缀。

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

How do I correctly create an offset between div's

html

css

width

margin