Изменение ширины элемента с «шагом» в несколько пикселей

[JustLuckyGuy]

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

[jMas]

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

Данное решение выглядит симпатичней. Будем пробовать.

[danSamara]

Недавно делал такую линейку. Хватило text-align: justify; для контейнера и display: inline-block; для элементов. Ну и немного магии для старых браузеров. Предложенный способ сильно заморочен, на мой взгляд.

[danSamara]

Поясню на примерах.
Если высота фиксирована и в контейнер можно поместить больше элементов, чем будет видно (то есть как минимум один будет скрыт, то можно сделать очень просто: jsfiddle.net/NNqPz/2/
Если же количество элементов неизвестно заранее или нельзя делать фиксированную высоту, то надо добавить в конце списка вспомогательный элемент, пример — jsfiddle.net/2vwWR/1/

Рецепт без JS, как видно.

[danSamara]

*Вместо jsfiddle.net/NNqPz/2 надо смотреть jsfiddle.net/NNqPz/3

[danSamara]

Не добавлять через добавление генерируемого контента ;) Да, спасибо за :after, не подумал об этом.

За разъяснение спасибо, убрать расстояние между элементами можно легко с помощью text-align: center, а вот облегание контейнером вплотную — да, задача посложнее.
Возьмём решение на заметку, Ваше в том числе — люблю без JS обходиться по мере возможностей.

[psywalker]

Да, тоже интересно было бы глянуть, где это может пригодится?

[EvgeniyLazarev]

Уважаемым комментаторам: вот пример — modelschel.ru/
Правда, способа этого не знал, пришлось реализовать на чистом JS.

[psywalker]

Спасибо за интересный пример. Вещь действительно полезная и мощная.

[vitvad]

может я чего-то не понимаю — но в этом конкретном примере
display: inline-block;
который кстати там и стоит + wrapper с фиксированной высотой и overflow: hidden;

кросбраузерное решение — для ИЕ6-ИЕ7 (комбинация display:inline; zoom:1; position: relative; через селекторы
* html .selector //IE6 only
*+html .selector //IE7 only
)

поведение абсолютно такое же как в примере из статьи и в вашем примере.

[EvgeniyLazarev]

Да, но… Шапка и футер должны ресайзиться так же. И другие страницы тоже.

[MTonly]

Всегда удивляют сайты, при отключённом JavaScript не отображающие вообще ничего. ;-)

[danSamara]

Самое смешное, что убрав одну строчку в CSS получаем нормально отображаемый сайт.
Не так, как с JS, конечно, но и не размазанный непонятными кусками, как часто бывает.

[bezdna]

в черной теме на главной ссылка «Наши модели» становится белой на белом, было бы не плохо поправить.

[EvgeniyLazarev]

Спасибо!

[mark_ablov]

Раз уж используется js, то почему бы не использовать только его?

[psywalker]

А зачем? Намного интереснее было бы лучше довести это решение до идеала, и вообще оказаться от CSS.

[mark_ablov]

Ну да, чистый css всегда лучше css+js, но раз не получилось обойти только им, и не получится в дальнейшем (IE8/IE9 не факт что быстро уйдут), то логичнее использовать компактный js-код.

[psywalker]

Согласен, но, надеюсь, что тут найдётся тот мастер, который сможет довести это решение до ума.

[ariser]

Я подозреваю, что в IE это останется и в последующих версиях: IE6 и 7 вычисляли значения по ширине родителя, последующие версии помнят изначальную ширину потомка. Не думаю, что в IE10 и далее от этого откажутся.
Так что надеяться надо не на уход браузеров, а на существование способа избавиться от js с тем, что есть сейчас. Я пока не нашел этого способа.

А вообще вы, наверное, правы: чем смешивать css и js, лучше обойтись одним, тем, что работает везде.

[Dmitry_f]

Далеко за примером ходить не надо: резайз на artlebedev.ru

[ariser]

Я бы добавил в список примеров еще элементы оформления, где одна неоднородная повторяющаяся по-горизонтали картинка должна в определённом месте стыковаться с другой, стационарной. Какая-нибудь изощренная рамка у блока, скажем. Это абстракция, но можно, думаю, найти и конктерный пример.

[vovs]

Честно говоря сомнительно применение данного кода. Если все равно нельзя использовать CSS, даже со всем ухищрениями и приходится использовать JS, то уж и использовать его полностью. Знаем размеры окна, знаем размеры элементов. По нужному алгоритму все воспроизводим. Ну как то так :-)

[psywalker]

Да, но в примере поста ширина не подстраивается под разрешение, и блоков и ширина экрана может быть любым кол-вом?

[psywalker]

Да, и это явный минус. Хочется увидеть решение, к которому прикоснёшься раз и забудешь о проблемах.

[psywalker]

Да, но этот вариант простой, но к сожалению рассчитан только на фиксированную высоту блоков.

[timonstr]

/display: inline; /* ну да, грязный хак для IE6 */
Слеш перед display: inline можно убрать, чтобы код стал валидным. Все равно float в браузерах постарше сделает элемент блочным.

[ariser]

Действительно. Я слишком привык экранировать «ненужные» стили.

[weirdan]

chrome 15.0.874.121 m/Win
скакать размер контейнера скачет, но размер li.item по какой-то причине получается 201px — все впечатление от демки портит:

habrastorage.org/storage1/c4544c6d/156cd253/c3ccc91b/21095ef0.png

[ariser]

Очень любопытно. У меня хром тот же, но размеры блоков правильные. Да и во вкладке Metrics на скриншоте всё в порядке.
Быть может, какое-нибудь расширение картину портит?

[weirdan]

Нет, расширения не виноваты. Нашел причину — стоял зум не стопроцентный.

[ArtyV]

Была похожая задача: есть дата (например, 1 января или 25 июня, т.е. переменной длины), которая находится в красивом блоке с цикличным бэкграундом и шириной зависящей от контента. Бэкграунд нельзя просто взять и оборвать, т.к. он волнистый и повторяется с шагом в 7 пикселей. Я вспомнил про эффект табуляции.

x	y
xx	y
xxx	y
xxxx	y
xxxxx	y

Между x и y стоит знак табуляции. Как только ширина символов до табуляции достигает ширины табуляции — она «отпрыгивает», отбрасывая контент после себя на максимальную ширину табуляции. Если взять эту ширину под контроль, то можно добиться, чтобы ширина элемента всегда была кратной нужному нам значению. Шириной табуляции проще всего манипулировать с помощью начертания и размера шрифта. И это работало! Но во всех браузерах по разному. Если под нормальные браузеры удалось подстроиться, то под Оперу не получилось — она плевала на размеры шрифтов и всегда делала табуляцию такой как ей хочется. Даже знаменитое оперовское -o-tab-size толком никак не помогло :(
В итоге сделал фиксированную ширину. А ведь светлое будущее было так близко! Гори в аду Опера.

[ArtyV]

Блин, в предпросмотре используется какой-то другой шрифт в подсветке кода, поэтому эффект не видно.

x	y
xx	y
xxx	y
xxxx	y
xxxxx	y
xxxxxx	y
xxxxxxx	y
xxxxxxxx	y
xxxxxxxxx		y
xxxxxxxxx	x	y
xxxxxxxxx	xx	y
xxxxxxxxx	xxx	y
xxxxxxxxx	xxxx	y
xxxxxxxxx	xxxxx	y