我有一堆固定宽度的元素，它们使用显示类型div设计为内联流动。inline-block这会在行尾留下一个空白空间（下一div行无法安装并包裹到下一行）。
我想做的是均匀地扩展行上的所有 div 以填满行，类似于 text 的“对齐”对齐方式。
换句话说，我希望div元素的最小宽度，并在一行中尽可能多地容纳它们，并填充整行。
这是我的示例 HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#container { margin: 100px; padding: 10px; border: 1px solid blue; }
.item { margin: 10px; width: 300px; min-width: 300px; display: inline-block; border: 1px solid red; }
</style>
</head>
<body>
<div id="container">
<div class="item">Item One</div>
<div class="item">Item Two</div>
<div class="item">Item Three</div>
<div class="item">Item Four</div>
</div>
</body>
</html>
纯 CSS + HTML 有可能吗？还是我必须编写一个脚本才能达到这个结果？
更新：由于人们一直建议使用百分比宽度来容纳单行中的项目，我必须注意这不是这个问题的意图。我想要类似“Justified”文本，但带有块。项目的数量是可变的，并且可能太多。
块需要具有相同的大小，具有默认（最小）宽度，如果需要，它们将导致它们换行到下一行，并且需要通过扩展它们的宽度来填充容器的宽度。
更新 2：
当前示例产生如下内容：
|--------------------------- Container -----------------------------|
| |------ 1 ------| |------ 2 ------| |------ 3 ------| |
| |------ 4 ------| |------ 5 ------| |------ 6 ------| |
| |------ 7 ------| |
我正在寻找这样的东西：
|---------------------------- Container ----------------------------|
| |-------- 1 --------| |-------- 2 --------| |-------- 3 --------| |
| |-------- 4 --------| |-------- 5 --------| |-------- 6 --------| |
| |-------- 7 --------| |
或这个：
|---------------------------- Container ----------------------------|
| |-------- 1 --------| |-------- 2 --------| |-------- 3 --------| |
| |-------- 4 --------| |-------- 5 --------| |-------- 6 --------| |
| |------------------------------ 7 ------------------------------| |
每个项目都有一个最小尺寸，因此在上面的示例中，项目 #4 和 #7 将不适合行上的剩余空间，并将换行到下一行。我想要那些已经安装到生产线上的来填满空间。
请注意，容器可能会重新调整大小，因为浏览器可以重新调整大小。所以，如果它变小到只有两个项目可以排成一行，我想看到这样的东西：
|----------------- Container -----------------|
| |-------- 1 --------| |-------- 2 --------| |
| |-------- 3 --------| |-------- 4 --------| |
| |-------- 5 --------| |-------- 6 --------| |
| |------------------- 7 -------------------| |
我希望这可以清除问题的意图。