Css 流体布局中的固定边界

我有以下HTML：

<div id="wrap">
  <div id="col-1">column 1</div>
  <div id="col-2">column 2</div>
  <div id="col-3">column 3</div>
</div>

目前，“包装”和页面之间的边距是流动的

每列之间没有间距

如何将包装和页面之间的边距固定为40px

每列之间的边距也固定为15px

注: 我将“框大小：边框框；”应用于所有元素。 我想这会让我的问题更容易解决。。。 但我不确定最好的方法

谢谢,，

---

米格尔

我想我理解你的要求。。。你说的是这个还是比为边距设置固定像素宽度更复杂的事情

CSS根据评论中的更多信息更新（再次）

---

代码笔草图：

带有以下标记：

<div id="wrap">
  <div id="col-1">column 1</div>
  <div id="col-2">column 2</div>
  <div id="col-3">column 3</div>
</div>

在第二个示例中，换行符的页宽为40px左右边距：

在本例中，我将换行CSS更改为：

.包裹{ 背景：红色； 利润率：0.40px； }

你认为这种方法怎么样

欢迎提出任何改进建议

谢谢,，

---

米格尔不完全是我想要的。。。我希望包裹物居中。在你的例子中，我看到调整大小时右边距比左边距大。我现在明白了为什么这是一个挑战：）这是一个更新的草图，可以保持流动性，但是你的固定像素边距（数字不能被划分为整数）将导致框模型概念出现问题。因此，基本上，我们应该使用偶数填充来创建您的“利润”，同时允许您的列保持33%的流动性。

body {
  background: white;
  margin: 40px;
}

#wrap {
  background: red;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

#col-1, #col-2, #col-3 {
  background: #ccc;
  float: left;
  padding: 8px;
  width: 33.333333%;

  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#col-1 { padding: 0 8px 0 0; }

#col-2 { padding: 0 8px; }

#col-3 {
  float: right;
  padding: 0 0 0 8px;
}

span { background: red; display: block; } /** Just to show content-area **/

<div id="wrap">
  <div id="col-1">column 1</div>
  <div id="col-2">column 2</div>
  <div id="col-3">column 3</div>
</div>

body {
  background: white;
}

.wrap {
  background: red;
  margin: 0 auto;
  overflow: hidden;
  width: 80%;
}
.col {
  background: blue;
  width: 25%;
  padding: 0 10px;
  float: left;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;   
}

.col:first-of-type {padding-left: 0;}

.col:last-of-type {padding-right: 0;}

/* Used to show the usable column area */
.col div {background: yellow;}