刪除網格系統左側和右側的填充

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定義的.row類，但不使用它。 如果您開始使用它並將您的列嵌入到一行中，則可以使用:first-child和:last-child選擇器來更改結束列的邊距。

像這樣

.row .column:first-child { 
    padding-left: 0; 
} 

.row .column:last-child { 
    padding-right: 0; 
} 

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

Fiddle