5

我在流畅的布局和文本对齐中有固定宽度的框：用这个发布的解决方案证明它们的合理性：

等距 DIV 的流体宽度

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

这当然会发生：

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

但我喜欢这样：

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

当然证明它的工作是合理的，但是在不使用 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/

谢谢你。

请参阅我的答案。

4

3 回答 3

7

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

只需添加如此多的 div （在本例中为 4 个），并将它们的高度设置为 1px。

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

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

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

于 2012-02-06T01:25:39.103 回答
0

您需要指定盒子的高度。在您的情况下，现在盒子的内容可能会有所不同，因为盒子没有对齐。

于 2012-02-03T09:21:28.957 回答
0

在你的 CSS 中为你的盒子设置一个最小高度。

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

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

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

于 2012-02-03T11:39:50.910 回答