我如何分割所有邊距，但最後均衡空間？

問題是，我們的網站上會出現大量不同的語言，但它們的動態文本長度未知。我需要一切都以中心爲中心，但不需要像這樣手動爲每個區域添加一個右邊距。所以他們看起來甚至每次都是這樣，但自動完成的將是巨大的，如果它可以做一些類型的jQuery計算，使其： Click here to see my CSS example 我如何分割所有邊距，但最後均衡空間？

我試圖修改this jQuery script I found但我失敗了，你可以在這裏看到jsfiddle.net/UTaSg/86/
如果不向最後一個孩子添加額外寬度（「類型：所有獨奏樂隊組」右側沒有空格），這可以工作。

我不知道如何做到這一點，任何幫助將不勝感激。預先感謝任何幫助！請儘可能使用示例。

在990像素的容器中總是會有這4個過濾器，我想用所有不同的語言在末端保留25px的空間。所以他們的文本長度會稍微改變，我希望3個過濾器空間之間的空間相等。

來源

2012-08-17 Steven Espinosa

看起來像Flexbox的一個偉大的使用（http://codepen.io/chriscoyier/pen/qazmI）太糟糕了，只有Chrome支持目前新的語法。 – Vestride 2012-08-17 03:22:24

您可以嘗試簡單地總結寬度，如果每個文本都從整體寬度中減去，則跳過3並將其作爲右邊距放置到除最後一個元素之外的每個元素。

您可以創建泛型插件，因爲這將適用於任何數量的項目都位於jQuery對象的長度內，並且您可以使用parent（）獲取容器。

你可以試試這個：http://jsfiddle.net/UTaSg/104/

來源

2012-09-27 03:09:24 jcubic

這可能不是你所希望的，但如果你真的不知道每列的濾鏡的寬度或數量，那麼我認爲你應該考慮其他可能的設計。

這是篩選器下拉列表的主要候選者。是的，它不是很酷，但它是功能性的。

另一種方法是在每列上設置固定寬度，然後使用text-overflow: ellipsis;來處理文本溢出。這可以幫助訪問者瞭解有更多可用的過濾器，並且您可以使用一個小箭頭圖形來完成交易，點擊後，可以滑過來顯示額外的過濾器。事情是這樣的：

enter image description here

我知道你是要求一個錘子，我給你一個香蕉，所以我的道歉，這沒有幫助。

來源

2012-08-17 03:29:28

在990像素的容器中總是會有這4個過濾器，我希望在所有不同語言的末端保留25px的空間。所以他們的文本長度會稍微改變，我希望三個中間空間是平等的。 – 2012-08-17 04:01:04

如果你想要整個事情的中心，你應該使用過濾器的容器上，你正在做的width: 100%; margin: 0 auto;。如果您想要使用相同的填充，則不需要.leftpositive, .leftnegative, .spacingforlanguage1。你可以簡單地做

.filter { padding-right: 2%; } 
.filter:last-child { padding-right: 0; }

這樣，它是相對於你已經離開的空間量，間距將是相對平等的。你也可以創建一個網格並設置一個給定的過濾器可以容納在容器內的最大寬度（例如，第一個過濾器的寬度爲33％，第二個過濾器的寬度爲25％等等）。這是保持平衡的最佳方式，特別是對於不同的瀏覽器寬度和設備。

來源

2012-08-17 04:54:05 acconrad

我明白你的意思，但我無法定義寬度，因爲我們永遠不會知道它們，將它們添加到像這樣的區域的整個網站將是一種痛苦。我需要一些類型的自動計算3箇中間空格是相等的。 – 2012-08-17 05:26:11

這就是使用百分比的重點 - 你永遠不必計算 - 它們都與你擁有的空間相關，但它們都是平等的。 – acconrad 2012-08-17 15:56:28

我如何分割所有邊距，但最後均衡空間？

回答

相關問題