Динамические ширины для панировочных сухарей

Question

Я немного застрял здесь, и я ищу некоторые идеи. У меня есть система пакетирования, которая использует :before и :after теги для стрелок.

Максимальная ширина для всех панировке вместе взятые является 735px, как это размер элемента контейнера.

В настоящее время; Мне нужно ограничить длину каждой хлебной крошки, чтобы остановить их переполнение и обеспечить, чтобы все они остались на одной линии. Для этого мне нужно установить максимальную ширину на палубе. Однако max-width будет зависеть от количества доступных в данный момент панировочных сухарей.

Я знаю, что самый простой способ будет подсчитывать количество хлебных крошек присутствующих и установить фиксированное положение, разделив ширину контейнера по количеству хлебных крошек, но это не, что я хочу - это будет означать, что панировочные сухари с более коротким названием имеют большой разрыв, как показано ниже.

Поэтому мне нужно указать max-width, но max-width будет зависеть от ширины других хлебных крошек.

Например, если все панировочные сухари имеют довольно длинный заголовок, то max-width должен быть достаточно маленьким, чтобы все панировочные сухари могли входить в контейнер.

Но если, скажем, пять панировочных сухарей имеют очень короткие заголовки (т.е. 4 символа), а пятый имеет более длинное название, я бы хотел, чтобы max-width разрешал отображать весь текст на последней палитре, но все еще обеспечивая, чтобы панировочные сухари все еще находились внутри контейнера.

Извините, если это слишком смущает. Вот jsFiddle моих панировочных сухарей, чтобы вы могли понять, как они структурированы. Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

http://jsfiddle.net/5CLYt/

Второй пример в jsFiddle показывает, как max-width должно зависеть от ширины других хлебных крошек, а не только количество отображаемой панировки.

Answer 1

Помимо ответа от @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; 
} 

Answer 2

Вы должны добавить дисплей: стол для вашего контейнера; добавить отображение: table-cell для каждого дочернего элемента и удалить плавающий;