2012-06-04 2 views
0

У меня есть контейнер, который используется для отображения пути сушки путем серии документов по мере их выбора.Изменение размера элементов в соответствии с их контейнером

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

Что должно произойти: Когда список крошки элементов становится слишком длинным, чтобы отображаться в контейнере они должны изменить размер, гарантируя, что все они остаются видимыми в контейнере.

Проблема: Это похоже на работу, но только до точки. После того, как список панировочных сухарей станет слишком длинным для контейнера, я разделил ширину контейнера на количество существующих элементов сухаря и соответственно установил ширины элементов. Однако это не будет работать последовательно, иногда показывая последний документ в списке, но не указывая его прямой родительский, если он выбран.

В идеале элементы пачки должны просто сжиматься, чтобы убедиться, что все они отображаются, во многом так же, как значки окна имеют размер, отображаемый на панели задач Windows.

Iv сделал небольшую скрипку, чтобы подчеркнуть, что происходит, и даже здесь вы можете видеть, что элементы не изменяются правильно, чтобы убедиться, что все они отображаются. Это наиболее очевидно, поскольку добавлено 8 или более элементов.

http://jsfiddle.net/MaxVK/drw9J/30/

Может кто-нибудь сказать мне, что я делаю неправильно, пожалуйста?

Большое спасибо

МВК

+0

Почему вы хотите продолжать сжимать divs до такой степени, что их больше нельзя читать? – nebulousGirl

+0

Поскольку его вряд ли когда-либо заберут так далеко, и готовые элементы будут иметь набор заголовков, чтобы их можно было идентифицировать с помощью мыши. Главное - изменить их размер так, чтобы они соответствовали друг другу. – MaxVK

ответ

1

Вы должны вычесть обивка, поля и размер границы (в вашем случае: 9px, 2 * 3 для заполнения, 2 * 1 для границы и 1 для левое поле) к ширине кнопок:

var Lok = (BredWid/ButCount)-9; 

http://jsfiddle.net/drw9J/35/

Вот простой пример:

http://jsfiddle.net/drw9J/34/

Вы заметите, что общая ширина не точно равна ширине контейнера (есть небольшой пробел после кнопки), это связано с округлением ширины.

В первом примере (ваша версия) пробел в конце происходит из-за кнопок, которые меньше, чем Lok.

+0

Спасибо за то, что ты хочешь на деньги. В конце концов, я действительно немного изменил свой контроль, но этот ответ хорошо знать, так как он показывает мне, где я ошибся (у меня все еще есть код, теперь отредактированный благодаря вашему ответу). Id отметит вопрос вверх, но пока не имеет достаточного количества точек. Большое спасибо.MVK – MaxVK

+0

На самом деле ваш вопрос помог мне построить мою панировку :-) Я не был уверен, какую структуру я должен использовать, и теперь все работает! Благодаря :-) –