ariser Dec 12 2011 at 13:49

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

4 min

6.3K

CSS*

From sandbox

+32

Comments 39

JustLuckyGuy Dec 12 2011 at 14:39

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

jMas Dec 12 2011 at 14:45

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

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

danSamara Dec 12 2011 at 18:30

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

danSamara Dec 12 2011 at 18:50

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

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

danSamara Dec 12 2011 at 18:51

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

UFO landed and left these words here

danSamara Dec 13 2011 at 00:30

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

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

UFO landed and left these words here

psywalker Dec 12 2011 at 14:39

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

EvgeniyLazarev Dec 12 2011 at 14:45

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

psywalker Dec 12 2011 at 14:47

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

vitvad Dec 12 2011 at 15:04

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

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

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

UFO landed and left these words here

EvgeniyLazarev Dec 12 2011 at 15:45

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

MTonly Dec 12 2011 at 15:33

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

danSamara Dec 13 2011 at 00:35

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

bezdna Dec 13 2011 at 19:42

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

EvgeniyLazarev Dec 13 2011 at 20:24

Спасибо!

mark_ablov Dec 12 2011 at 14:46

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

psywalker Dec 12 2011 at 14:47

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

mark_ablov Dec 12 2011 at 14:49

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

psywalker Dec 12 2011 at 14:53

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

ariser Dec 12 2011 at 15:10

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

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

Dmitry_f Dec 12 2011 at 14:53

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

ariser Dec 12 2011 at 14:59

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

vovs Dec 12 2011 at 15:34

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

UFO landed and left these words here

psywalker Dec 12 2011 at 17:11

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

UFO landed and left these words here

psywalker Dec 12 2011 at 17:23

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

UFO landed and left these words here

psywalker Dec 12 2011 at 20:52

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

timonstr Dec 13 2011 at 01:08

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

ariser Dec 13 2011 at 07:01

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

weirdan Dec 13 2011 at 07:06

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

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

ariser Dec 13 2011 at 07:20

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

weirdan Dec 13 2011 at 07:35

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

ArtyV Dec 13 2011 at 14:00

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

x	y
xx	y
xxx	y
xxxx	y
xxxxx	y

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

ArtyV Dec 13 2011 at 14:03

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

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