Question

我在流畅的布局和文本对齐中修复宽度框：使用此发布的解决方案证明它们是正确的：

但是因为我在响应式布局中还有几行。

这当然会发生：

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

但我喜欢这样：

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

当然可以证明这是合理的，但是如果没有使用javascript来解决这个问题吗？

我认为text-align-last：left可以正常工作，但它没有，而且它还没有正式播出。

~~可能解决方案的想法：~~

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

以下是我对可能的解决方案的想法：

要使最后一行左对齐，我们实际上需要用隐形框填充缺少的空格。我们可以轻松地手动执行此操作，但div的数量是用户生成的并且始终不同。

因此，杂草需要知道丢失的盒子数量，并将它们附加到我们已经拥有的盒子上，以使其工作：

所以这是我的（婴儿）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。这将是一个很好的原因，然后公式将适用于响应式布局，而不会在每次随浏览器宽度变化时调整行号。

这是个好主意吗？

我希望有人愿意这样做。

这是一个小提琴： http://jsfiddle.net/L2mPf/

谢谢。

查看我的答案。

Answer 1

好的，这是使用css的该死的简单解决方案：

只需添加许多连续多少个div（在本例中为4）并给它们高度为1px。

没有任何东西可以看，所有的作品都像没有javascript的魅力。

这是新的小提琴：http://jsfiddle.net/L2mPf/1/

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

Answer 2

您需要指定框的高度。在您的情况下，框的内容可能会因此而变化，因为框未对齐。

Answer 3

你的css中的

为你的盒子设置了一个最小高度。

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

例如，

100px包括IE6的最小高度修复

您可能还希望向左浮动（和显示块）您的框，然后clearfix父容器，以便在对齐问题仍然存在时保持打开状态。（链接中clearfix css的示例）

流体宽度等间距DIV +最后一行左对齐

3 个答案: