ширина жидкости с равномерно распределенными DIVs (также из контейнера)

Question

Я хочу, чтобы достичь этого, используя только HTML/CSS:

Многое, как this или this, кроме того, что они должны быть равномерно распределены также от контейнер.

Answer 1

Я пришел с этим, на основе сетки 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 2

Вот, наверное, ужасный способ сделать это.

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 до 3/4 width ваших дивы.

Answer 3

Если у вас есть место между пробелом между определенной шириной и вам не нужна поддержка IE8, вы можете использовать функцию calc() для этого (http://caniuse.com/#search=calc).

Просто добавьте следующие элементы слева и слева к дочерним элементам.

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