2017-01-26 14 views
1

グリッドシステムには列間に10pxのパディングがあります。しかし、グリッド全体の左と右にパッディングが必要なわけではありません。私は大きなラッパーに列を入れ、余白を左に追加してみました:-10pxとmargin-right:-10pxですが、グリッドを左に移動するだけです。グリッドシステムの左右にあるパディングを削除します

<div class="column column-1"><div class="inner"></div></div> 
<div class="column column-2"><div class="inner"></div></div> 
<div class="column column-3"><div class="inner"></div></div> 
<div class="column column-1"><div class="inner"></div></div> 
<div class="column column-1"><div class="inner"></div></div> 
<div class="column column-1"><div class="inner"></div></div> 

CSS:

.row, 
.column { 
    box-sizing: border-box; 
} 
.column { 
    position: relative; 
    float: left; 
    display: inline-block; 
} 
.column-1 { 
    width: 33.3333333%; 
} 
.column-2 { 
    width: 66.6666666%; 
} 
.column-3 { 
    width: 100%; 
} 
.column { 
    min-height: 60px; 
    padding: 10px; 
} 
.inner { 
    height: 100px; 
    width: 100%; 
    background: black; 
    display:block; 
    position: relative; 
} 

JS Fiddle

+0

同様

はそれらのdivは、動的に追加されるか、別のdivで行を分けることができますか? (自分のコンテナに行を置く) – Gezzasa

答えて

3

私はあなたのCSSで定義された.rowクラスを持って気づくが、それを使用していません。 これを使用して列内に列を埋め込む場合は、:first-childおよび:last-childセレクタを使用して、最後の列の余白を変更できます。そう

.row .column:first-child { 
    padding-left: 0; 
} 

.row .column:last-child { 
    padding-right: 0; 
} 

<div class="row"> 
    <div class="column column-1"><div class="inner"></div></div> 
    <div class="column column-2"><div class="inner"></div></div> 
</div> 

Fiddle

+0

素晴らしい感謝!個々の列を個別にスタイルする方法をどのようにお勧めしますか?それぞれの列の内側に別のクラスを配置するだけです。 – RhysE96

+0

ご要望によって異なります。しかし、余分なスタイリングを追加するために、個々の列に直接クラスを追加することを止めるものはありません。 – JamesT

関連する問題