流体宽度与等间距的DIVs +最后一行对齐

I have fixed width boxes in a fluid layout and text-align: justify them with this posted solution:

我有固定宽度的盒子在流体布局和文本对齐:证明他们与这个张贴解决方案:

等间距的流体宽度

But since I have a couple of more rows in a responsive layout.

但是由于我在响应式布局中有更多的行。

This is of course happens:

这当然发生了:

------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------          ------        ------    
|    |          |    |        |    |   
|    |          |    |        |    | 
------          ------        ------

But I like to have it like this:

但是我喜欢这样:

------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------    ------    
|    |    |    |    |    |    |    |    
|    |    |    |    |    |    |    | 
------    ------    ------    ------    
------    ------    ------   
|    |    |    |    |    |  
|    |    |    |    |    |
------    ------    ------

Of course justify does it's job but is there a solution to this without using javascript to do this?

当然这是合理的，但是没有javascript的解决方案吗?

I thought text-align-last: left could work, but it doesn't and it's not official eather yet.

我认为文本- - - - - - - - - - - -最后:离开可以工作，但它没有，而且它还不是正式的eather。

~~Idea for a possible solution:~~

可能的解决方案:

I came up with a possible javascript solution but I need your help for that.

我提出了一个可能的javascript解决方案，但我需要您的帮助。

Here's my idea for a possible solution:

我有一个可能的解决方案:

To get the last line left aligned we would actually need to fill those missing spaces with invisible boxes. We could easily do that by hand but the number of divs are user generated and always different.

为了使最后一行保持对齐，我们实际上需要用不可见的方框来填充这些空格。我们可以很容易地手工操作，但是divs的数量是用户生成的，并且总是不同的。

So weed need to know the number of boxes that are missing and append them to those we already have, to make it work:

所以weed需要知道丢失的盒子的数量，并把它们加到我们已经拥有的盒子上，这样才能让它工作:

So here is my (infantile) srcipting idea:

这就是我(婴儿)的想法:

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.

I don't know if there is way to find out how many items are already in a row to pass that to javascript. This would be good cause then the formular would work for a responsive layout without adjusting the row number with each time they change with the browser width.

我不知道是否有办法找出一行中已经有多少项可以传递给javascript。这很好，因为这样格式就可以处理响应性的布局，而不需要在行号随浏览器宽度变化时进行调整。

Is this a good idea?

这是个好主意吗?

I hope some would like to do this.

我希望有人愿意这样做。

Here's a fiddle to work with: http://jsfiddle.net/L2mPf/

这里有一个可以使用的小提琴:http://jsfiddle.net/L2mPf/。

Thank you.

谢谢你！

See my answer beyond.

看到我的答案。

3 个解决方案

#1

Ok, here's the damn easy solution with css:

好的，这里有一个简单的css解决方案:

Simply add so many divs of how many in a row would be (in this case 4) and give them a height of 1px.

只需在一行中添加如此多的div(在本例中为4)，并赋予它们1px的高度。

Nothing to see and all works like charm without javascript.

没有什么可看的，所有的都像没有javascript的魅力。

Here's the new fiddle: http://jsfiddle.net/L2mPf/1/

这里有一个新提琴:http://jsfiddle.net/L2mPf/1/

Thanks to @GGG for focusing me back on css and this solution.

感谢@GGG让我重新关注css和这个解决方案。

#2

You need to specify the height for the boxes.In your case right now the content of the boxes might be varying due to this the boxes are not coming aligned.

您需要指定框的高度。在你现在的情况下，盒子的内容可能会因为这个而变化，因为盒子没有对齐。

#3

in your css set a min-height for your boxes.

在你的css设置一个最小高度的盒子。

.box-class {
    min-height: 100px;
    height: auto !important;
    height: 100px;
}

100px is for example and includes a min height fix for IE6

例如100px包含了IE6的最小高度修正

you may also want to float left (and display block) your boxes and then clearfix the parent container to keep it open if the alignment issue persists. (example of clearfix css in the link)

您可能还希望将您的箱子向左浮动(并显示块)，然后清除父容器，以便在对齐问题持续时保持其打开。(链接中的clearfix css示例)

#1