【发布时间】：2014-05-13 22:17:42
【问题描述】：
我有一堆固定宽度的div 元素，使用inline-block 显示类型设计为内联流动。这会在行尾留下一个空白空间（下一个 div 无法安装并换行到下一行）。
我想做的是均匀地扩展行上的所有 div 以填满行，类似于文本的“对齐”对齐方式。
换句话说，我想在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 -------------------| |
我希望这可以清除问题的意图。
【问题讨论】：
-
使用 CSS，将 div 标签宽度设置为百分比。
-
我已经试过了。它不会产生预期的结果。一行中
div元素的数量是可变的，并且会根据容器（浏览器窗口）的宽度而变化。 -
我不知道这是否可行，但由于 inline-block 对 line-height、letter-spacing 和 text-align: center 有反应，也许你可以简单地使用 text-align: justify？跨度>