有等距的DIV +最後一排流體寬度左對齊

我在流體佈局和文本對齊固定寬度的盒子：與此發佈解決方案證明他們：有等距的DIV +最後一排流體寬度左對齊

但因爲我有一對夫婦在響應式佈局中有更多行。

當然，這是發生了：

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

但我喜歡這樣的：

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

當然的正當性做它的工作，但有沒有這樣的解決方案，而無需使用JavaScript來做這個？

我認爲text-align-last：left可以工作，但它不會，它不是官方的eather。

~~想法爲可能的解決方案：~~

我想出了一個可能的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/

謝謝。

看到我的答案超越。

來源

2012-02-03 Melros

你可以使用表嗎？ – 2012-02-03 19:53:01

不幸的是不會導致div將由用戶生成。 div的數量可以是任何數字。 – Melros 2012-02-03 20:23:39

如果您知道列數並且具有固定高度並且瀏覽器兼容性不是一個大問題，那麼您可以使用css列 – 2012-02-03 20:30:37

好吧，這裏用CSS該死的簡單的解決方案：

只需添加多少連勝會有那麼多的div（在這種情況下4），並給他們一個高度爲1px。

沒有看到和所有的作品像沒有JavaScript的魅力。

這裏的新小提琴：http://jsfiddle.net/L2mPf/1/

感謝@GGG聚焦我回到CSS和此解決方案。

來源

2012-02-06 01:25:39 Melros

JFTR，相關對話 - http://chat.stackoverflow.com/transcript/message/2551787#2551787 – 2012-02-06 01:41:50

謝謝，你救了我拉我的頭髮 – 2013-06-27 12:21:56

不客氣！這裏還有一篇文章解釋了我真正想用這種方式實現的目標：http://www.barrelny.com/blog/text-align-justify-and-rwd/ – Melros 2013-07-10 17:39:49

您需要指定箱子的高度。在您的情況下，箱子的內容可能會有所不同，因爲箱子不會對齊。

來源

2012-02-03 09:21:28 Gurvinder

這不是我的意思。我編輯了我的問題。 – Melros 2012-02-03 16:13:21

在你的CSS中爲你的盒子設置一個最小高度。

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

100px的是例如，包括用於IE6

一分鐘高度修復

你可能還需要左浮動（和顯示塊）的箱子，然後clearfix父容器保持打開如果對準問題依然存在。（在鏈接clearfix CSS的例子）

來源

2012-02-03 11:39:50

這不是我的意思。我編輯了我的問題。 – Melros 2012-02-03 16:13:30

有等距的DIV +最後一排流體寬度左對齊

回答

相關問題