Html 浮动或内联块元素上的自动边距

我试图使div空间中的所有子元素都很好。我已经使用内联块元素和浮动元素设置了css。子元素的大小是固定的

HTML

基本上，当窗口大小改变时，我希望子元素的边距使它们填满剩余的空间。因此，我希望子元素的边距在保持左对齐的同时均匀地扩展到所有子元素的空间，而不是将剩余空间放在右侧

---

我不喜欢使用Javascript进行任何计算，我希望得到一个纯css解决方案，但似乎无法使任何东西正常工作。

使用

文本对齐：对父元素进行对齐，其中子元素设置为
显示：内联块

在您的情况下，
.content
类可以拥有它。您的空间将均匀分布，而元素可以保持固定大小（宽度）

希望这能有所帮助。
百分比的问题在于，边距仍然是固定的，并且不会随窗口大小而动态变化。考虑到剩余空间足够容纳
。内容a
的边距和填充，您的解决方案确实会填满剩余空间。否则，您将不得不执行@tedski所提到的百分比。您是希望每行上的元素数量保持不变，还是希望它们在有空间时向上移动？我希望它们在有空间时向上移动。我想让布局由设备屏幕宽度决定。
<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>

.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;
}

.content {
    text-align:justify;
}