流體柱佈局，它們之間有固定的像素邊距？

Question

我不想爲此使用JS，只有一個css解決方案請。

我想要一個包含div內的列，以適應內部同樣，即每一個是容器寬度的三分之一。我已經在這裏實現了 - http://jsfiddle.net/yFxZX/

但是，除此之外，我還希望10px margin列之間，第一列接吻容器的左邊緣，右列接吻容器的右邊緣。看到下面的圖像粗略模擬。

隨着瀏覽器重新調整大小或父容器更改寬度我希望列相應地調整大小以填充空間，但它們之間的邊距保持固定在10px。

這可以做到沒有JS？

Answer 1

使用負邊距：

.container { 
    background: green; 
    overflow: auto; 
} 

.inner { 
    padding-left: 20px; 
} 

.box { 
    width: 33.3%; 
    background: red; 
    float: left; 
    margin-right: 10px; 
} 

.first { 
    margin-left: -20px; 
} 

.last { 
    width: 33.4%; 
    margin-right: 0; 
    /*float:right;*/ 
} 

img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; 
    /* ie8 */ 
} 

http://jsfiddle.net/yFxZX/2/

Answer 2

在HTML：

<div class="container"> 
    <div class="box"> 
     <div class="box-content"> 
      First 
     </div> 
    </div> 
    <div class="box"> 
     <div class="box-content"> 
      SECOND 
     </div> 
    </div> 
    <div class="box last"> 
     <div class="box-content"> 
      Last 
     </div> 
    </div> 
</div> 

在CSS中：

.container { 
    background: green; 
    overflow: auto; 
} 
.box { 
    width: 33.3%; 
    float: left; 
} 
.box.last { 
    width: 33.4%; 
} 
.box .box-content { 
    margin-right: 10px; 
    background: red; 
} 
.box.last .box-content { 
    margin-right: 0px; 
    background: red; 
} 

，如果你想你的盒子具有相同的高度 在CSS中添加：

.box .box-content { 
    margin-right: 10px; 
    background: red; 
    margin-bottom: -1000px; 
    padding-bottom: 1000px; 
} 

http://jsfiddle.net/wqwDN/