同じ幅の左に浮動小数点数のボックスを作成する問題

Question

左に浮動小数点数を四捨五入して、幅を25％、横にmargin:0 10pxを作成しようとしていますが、最後のdivはスクロールしています。

ボックスサイジングを適用しようとしましたが、何もしませんでした。私のコメントを1として

Plunker link

<div class="box">1</div> 
<div class="box">2</div> 
<div class="box">3</div> 
<div class="box">4</div> 

.box { 
    width: 25%; 
    background: #333; 
    float: left; 
    color: #fff; 
    margin: 0 10px; 
    padding: 10px; 
} 

Answer 1

：あなたがCALCを得ることができない場合は

box-sizing: border-box

.box { 
 
    width: calc(25% - 20px); /* takes care of margin */ 
 
    background: #333; 
 
    float: left; 
 
    color: #fff; 
 
    margin: 0 10px; 
 
    box-sizing: border-box; /* takes care of padding */ 
 
    padding: 10px; 
 
}

<div class="box">1</div> 
 
<div class="box">2</div> 
 
<div class="box">3</div> 
 
<div class="box">4</div>

でwidth: calc(25% - 20px)をお試しください仕事に、あなただけの余白を削除し、内箱（私は古いブラウザと互換性を持たせるために行う通常何を）使用することができます@tobyはあなたが減少する必要が言ったように

.box { 
 
    width: 25%; 
 
    box-sizing: border-box; 
 
    padding: 0 10px; 
 
    float: left; 
 
} 
 
.box .inner { 
 
    background: #333; 
 
    color: #fff; 
 
    padding: 10px; 
 
}

<div class="box"><div class="inner">1</div></div> 
 
<div class="box"><div class="inner">2</div></div> 
 
<div class="box"><div class="inner">3</div></div> 
 
<div class="box"><div class="inner">4</div></div>

Answer 2

をあなたの幅のパーセンテージ。しかし、それはだ、プラスマージン右/左 - パディングを使用すると、私は仕事にそれを得ることができる【選択最小はdiv要素のサイズが25％である18％

.box { 
 
    width: 18%; 
 
    background: #333; 
 
    float: left; 
 
    color: #fff; 
 
    margin: 0 10px; 
 
    padding: 10px; 
 
}

<div class="box">1</div> 
 
<div class="box">2</div> 
 
<div class="box">3</div> 
 
<div class="box">4</div>