我在流体布局和文本对齐中有固定宽度的框:用这个发布的解决方案证明它们:
Fluid width with equally spaced DIVs
但是因为我在响应式布局中有更多行。
这当然会发生:
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------
| | | | | |
| | | | | |
------ ------ ------
但我喜欢这样:
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------
| | | | | |
| | | | | |
------ ------ ------
当然证明它的工作是正确的，但是有没有不使用 javascript 来解决这个问题的解决方案？
我认为 text-align-last: left 可以工作，但事实并非如此，而且还不是正式的天气。
可能解决方案的想法:
我想到了一个可能的 javascript 解决方案，但我需要你的帮助。
这是我对可能的解决方案的想法:
为了让最后一行左对齐，我们实际上需要用不可见的框填充那些缺失的空间。我们可以很容易地手动完成，但 div 的数量是用户生成的并且总是不同的。
所以 weed 需要知道缺少的盒子数量并将它们附加到我们已有的盒子上，以使其工作:
所以这是我的(幼稚的)srcipting 想法:
1. Count all divs
2. Divide them with 4 (cause we have 4 in a row)
3. If the SolutionA has no decimal, nothing will happen cause all is good
4. If the SolutionA has a decimal, remove it
5. SolutionA + 1 = SolutionB
6. SolutionB x 4 (cause we have 4 each in a row) = SolutionC
7. SolutionC - SolutionA = Number of divs we need to add.
我不知道是否有办法查明一行中已经有多少项并将其传递给 javascript。这将是一个很好的原因，那么公式将适用于响应式布局，而无需在每次随浏览器宽度变化时调整行号。
这是个好主意吗？
我希望有人愿意这样做。
这是一个可以使用的 fiddle : http://jsfiddle.net/L2mPf/
谢谢。
请参阅我的答案。
最佳答案
好的，这是使用 css 的该死的简单解决方案:
简单地添加一行中的多少个 div(在本例中为 4 个)并给它们 1px 的高度。
没有 javascript，没有什么可看的，一切都像魅力一样。
这是新的 fiddle :http://jsfiddle.net/L2mPf/1/
感谢@GGG 让我重新关注 css 和这个解决方案。
关于javascript - 具有等间距 DIV 的流体宽度 + 最后一行左对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9123232/