Question

我有一个网格系统，列之间有10px填充。但我不希望在整个网格的左侧和右侧填充。我已经尝试将列放在一个大包装器中并添加margin-left：-10px和margin-right：-10px但它只是向左移动网格。

<div class="column column-1"><div class="inner"></div></div>
<div class="column column-2"><div class="inner"></div></div> 
<div class="column column-3"><div class="inner"></div></div>
<div class="column column-1"><div class="inner"></div></div>
<div class="column column-1"><div class="inner"></div></div>
<div class="column column-1"><div class="inner"></div></div>

CSS：

.row,
.column {
  box-sizing: border-box;
}
.column {
  position: relative;
  float: left;
  display: inline-block;
}
.column-1 {
  width: 33.3333333%;
}
.column-2 {
  width: 66.6666666%;
}
.column-3 {
  width: 100%;
}
.column {
  min-height: 60px;
  padding: 10px;
}
.inner {
  height: 100px;
  width: 100%;
  background: black;
  display:block;
  position: relative;
}

JS Fiddle

Answer 1

我注意到你的css中定义了.wrap类，但没有使用它。如果您开始使用它，并将列嵌入一行，则可以使用.row和:first-child选择器更改结束列的边距。

喜欢这样

:last-child

Fiddle

删除网格系统左侧和右侧的填充

1 个答案: