具有等间距DIV的流体宽度（也来自容器）

Question

我想实现这一点，只使用HTML / CSS：

与this或this非常相似，但它们必须与容器的间距相等。

Answer 1

如果您需要空间的项目具有已定义的宽度且您不需要IE8支持，则可以使用calc（）执行此操作（http://caniuse.com/#search=calc）。

只需在子元素中添加以下margin-left。

/* X = number of containers */
/* Y = container width (needs to be defined) */
/* Z = number of spaces (usually X + 1) */
margin-left: calc((100% - (X * Y)) / Z);

Codepen：http://codepen.io/supah_frank/pen/OPMrvZ

Answer 2

我想出了这个，基于Bootstrap的网格：

<强> HTML

<div class="container">
    <div class="row">
        <div class="col">
          <div class="box"></div>
        </div>
        <div class="col">
          <div class="box"></div>
        </div>
        <div class="col">
          <div class="box"></div>
        </div>
        <div class="col">
          <div class="box"></div>
        </div>
    </div>
</div>

CSS（SCSS）

$gutter: 100px;

* { box-sizing: border-box; }

body { margin: 0; padding: 0; }

.container {
  width: 100%;
  padding-left: $gutter/2;
  padding-right: $gutter/2;

  background: lightgrey;
  height: 75px;
}
.row {
  //margin-left: -$gutter/2;
  //margin-right: -$gutter/2;
}
.col {
  float: left;
  padding-left: $gutter/2;
  padding-right: $gutter/2;
  width: 25%;

  //border: 1px solid blue;
  background: lightgray;
  height: 50px;
}

.box {
  width: auto;
  background: red;
  height: 25px;
}

Sample

Answer 3

这可能是一种可怕的方式。

body { width:100%; border:solid 1px blue; margin:0; padding:0; }
div { background:red;
      height:60px;
      width:300px;
      display:inline-block;
      position:relative;
      margin-left:-225px;
}
div.a {left:25%;}
div.b {left:50%;}
div.c {left:75%;}

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>  

然后将（负）margin-left值调整为你的div的width的3/4。