動態寬度麪包屑

我有點卡在這裏，我正在尋找一些想法。我有一個麪包屑系統，它使用:before和:after標籤作爲箭頭。動態寬度麪包屑

enter image description here

爲放在一起所有面包屑的最大寬度爲735px，因爲這是所述容器元件的尺寸。

現在;我需要限制每個麪包屑的長度以防止它們溢出並確保它們全部保持在一條線上。爲此，我需要在麪包屑上設置最大寬度。但max-width將取決於當前可見的麪包屑的數量。

我知道最簡單的方法是點算麪包屑的數量和由麪包屑的數量除以容器寬度設定一個固定的位置，但是這是不我想要的東西 - 這將意味着標題較短的麪包屑有很大差距，如下所示。 enter image description here

所以我需要指定一個max-width，但max-width將取決於其他麪包屑的寬度。

例如，如果所有面包屑的標題相當長，max-width將需要足夠小以允許所有面包屑放入容器中。

但是，如果有五個麪包屑的標題很短（即4個字符），而第五個標題的長度更長，我希望max-width允許顯示最後一個麪包屑上的所有文本，但仍然確保麪包屑仍然適合在容器內。

對不起，如果這太混亂。這裏有一個jsFiddle我的麪包屑，所以你可以瞭解他們的結構。如果您需要更多信息，請告訴我。

http://jsfiddle.net/5CLYt/

在的jsfiddle第二個例子示出了如何max-width需要依賴於其他的麪包屑的寬度，而不是隻顯示的麪包屑的數量。

來源

2014-01-30 Dan Johnson

除了@JAYBEkster的回答，您可以考慮使用flexbox。這裏是一個很好的資源：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

我已經更新您的FIDLE：http://jsfiddle.net/NicoO/5CLYt/1/

/* 

COPIED FROM: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

*/ 

#container { 
    display: flex; 
    justify-content: space-around; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
}

我知道這是不是你想要的，因爲項目之間的空間越來越大，而不是項目它的自我。但也許這是正確的方向。

也許保持此問題更新。

更新2：flexbox非常棒。它的工作原理與Firefox：http://jsfiddle.net/NicoO/5CLYt/3/

所有你需要做的是：

.breadcrumbButton 
{ 
    flex: 1 1 auto; 
}

來源

2014-01-30 12:02:30

您應該爲您的容器添加display：table;爲每個孩子添加display：table-cell並刪除浮動;

來源

2014-01-30 11:49:17 JAYBEkster

那如何解決最大寬度的問題？ –

可以使用此方法，但可以消除每個孩子之間的空白。 http://jsfiddle.net/5CLYt/2/任何解決方法？ –

這很聰明。你可以在容器中添加'border-spacing：20px'。雖然：在當前元素的元素消失之後 –

動態寬度麪包屑

回答

相關問題