作divsて20%の幅をパディングと、それぞれなの左または右の

Question

ということかもうこのレイアウトの構築:

を想定したテキストとグリッド内の同じ部、そのシェアは、幅約990px、どのようしたいので動的にこのグリッドと同等のカラム幅な固定幅?

私がそれぞれの div へ width:20%, ものの、その後もラインアップとしての隣の代わりにスペース。 http://jsfiddle.net/97H3P/

私がそれぞれの div へ width: 20%, box-sizing: border-box, は、 padding: 0 20px, が存在するであろう20pxギャップの端にラインやエッジの最初と最後の div. http://jsfiddle.net/97H3P/1/

かの設定の各 div へ box-sizing: border-box;, width: 20% や padding-right: 20px, その5部門の設定 padding-right: 0;, が、第五部よりついてご覧いただけます。 http://jsfiddle.net/97H3P/2/

I果たすことができるのであろうかにつ divs各行のため box-sizing: border-box;, width:20.8%, 第回る width: 16.8%, その padding-right: 20px すべてのものが数学だけでは990px幅になります。 http://jsfiddle.net/97H3P/3/

あると良い。いく上品な。

感謝。

更新:ほぼ問題ありませんが、興味があったCSS3 column-count 特集では、その実現のみでは上下、左右にあいの必要はあります。

Answer 1

こちらの 非Boostrap例んのスケッチです。

もので、ブートストラップ。

フレキシビリティを実現するの position: relative や box-sizing: border-box

でもちょっと反応性を示している。

Answer 2

するべきflexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

の使用に関してはどうもdivsとしてスペーサー? 怒

HTML

<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>

CSS

div {
    background: #000;
    height: 200px;
    float: left;
    opacity: 0.2;
    width: 18%;
}

div.spacer{
    opacity: 1;
    width: 2.5%;
}