css - 流体布局中的固定边距

Question

我有以下 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>

我有以下 CSS:

#wrap {
  margin: 0 auto 0;
  width: 90%;
}

#col-1, #col-2, #col-3 {
  float: left;
  width: 30%;
}  

目前“换行”和页面之间的边距是流动的。

而且每列之间没有间距...

如何让换行和页面之间的边距固定为40px？

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

注意: 我正在应用“box-sizing: border-box;”对所有元素。 我认为这更容易解决我的问题...... 但我不确定最好的方法。

谢谢你， 米格尔

Answer 1

使用以下标记:

<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>

我创建了两个示例。两者的列边距都固定为 20px。

在第一个示例中，换行以 80% 的页面宽度居中: http://codepen.io/mdmoura/pen/xghzn

对于此示例，CSS 如下:

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;}

在第二个示例中，换行的页面宽度为 40px 左右边距: http://codepen.io/mdmoura/pen/pKgos

在这个例子中，我将 wrap CSS 更改为:

.wrap { 背景:红色； 边距:0 40px；

您如何看待这种方法？

欢迎提出任何改进建议。

谢谢你， 米格尔