html - フロート要素またはインラインブロック要素の自動マージン

Question

divスペースのすべてのサブ要素をうまく作成しようとしています。インラインブロック要素とフロート要素を使用してcssを設定しました。子要素は固定サイズです。

jsFiddle

HTML

<div class="content">
    <h2>Inline-block</h2>
    <a href="#" class="i-b-item">I-B Item 1</a>
    <a href="#" class="i-b-item">I-B Item 2</a>
    <a href="#" class="i-b-item">I-B Item 3</a>
    <a href="#" class="i-b-item">I-B Item 4</a>
    <a href="#" class="i-b-item">I-B Item 5</a>
    <a href="#" class="i-b-item">I-B Item 6</a>
    <a href="#" class="i-b-item">I-B Item 7</a>
    <a href="#" class="i-b-item">I-B Item 8</a>
    <h2>Floated</h2>
    <a href="#" class="f-item">Float Item 1</a>
    <a href="#" class="f-item">Float Item 2</a>
    <a href="#" class="f-item">Float Item 3</a>
    <a href="#" class="f-item">Float Item 4</a>
    <a href="#" class="f-item">Float Item 5</a>
    <a href="#" class="f-item">Float Item 6</a>
    <a href="#" class="f-item">Float Item 7</a>
    <a href="#" class="f-item">Float Item 8</a>
    <div style="clear:both"></div>
</div>

CSS

.content {
    background: grey;
}

.content a{
    padding: .5em;
    margin: .5em;
    height: 75px;
    width: 150px;
    background: white;
}

.i-b-item{
    display: inline-block;
}

.f-item{
    float: left;
    display: block;
}

基本的に、ウィンドウサイズが変更された場合、子要素の余白で残りのスペースを埋めるようにします。したがって、右側に残りのスペースを配置する代わりに、子要素の余白を拡張して、左揃えのままですべての子要素を均等に配置する必要があります。

私はJavascriptで計算をしたくないので、純粋なcssソリューションを望んでいますが、何も正しく機能しないようです。