デスクトップ版で画面の幅全体を塗りつぶす4列の応答グリッドを作成しようとしていますが、余白を追加すると間違いなくその間に表示されます最後の列が画面の残りの幅を埋めるのではなく、列の幅に応じて新しい行にドロップされることを示します。CSSの全幅グリッド - 偶数マージンの列
CSS:
#servicesGrid
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.service
{
width:24.75%;
height:45%;
background:#262626;
display:block;
float:left;
margin:1px;
}
#servicesGrid .service:nth-of-type(1)
{
width:100%;
}
#servicesGrid .service:nth-of-type(2)
{
margin-left:0;
}
#servicesGrid .service:nth-of-type(5)
{
margin-right:0;
}
HTML:JSFiddle上
<div id="servicesGrid">
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
<div class="service"></div>
</div>
例:https://jsfiddle.net/4bw4p3LL/。
いくつかの簡単な提案:余白の代わりにパディングを使用することができます。または、http://getbootstrap.com/css/#grid(ブートストラップを含める自由/意志がある場合)を見てください。代わりに、例のブートストラップを使用し、自分のコードに使用する手法を盗みます。 – RMo
下記の私の答えを参照してください。私はそれができる最高のことを説明した。それが役に立ったら教えてください –