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

我想我明白你在问什么...你在谈论这个或者更复杂的东西，而不仅仅是设置边距的固定像素宽度吗？

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

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

Codepen sketch：http://cdpn.io/xEueC

Answer 2

使用以下标记：

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

您如何看待这种方法？

欢迎提出改善建议的任何建议。

谢谢你，米格尔

固定流体布局中的边距

2 个答案: