0

我有以下 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;” 到所有元素。我认为解决我的问题更容易......但我不确定最好的方法。

谢谢你，米格尔

4

2 回答 2

0

我想我明白你在问什么......你是在谈论这个还是比仅仅为边距设置固定像素宽度更复杂的东西？

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 草图：http ://cdpn.io/xEueC

于 2013-08-19T19:03:18.470 回答
0

使用以下标记：

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

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

在第一个示例中，换行以 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；}

您如何看待这种方法？

欢迎任何改进这一点的建议。

谢谢你，米格尔

于 2013-08-19T21:30:40.007 回答