Comments 39
А можно пример, зачем это нужно? Выглядит интересно, но не сталкивался с подобными задачами.
+2
Например линейка фотографий, тянущаяся по ширине. Обычно делают белый (или любой другой) закрывающий последние элементы (чтобы резко не обрезать последний элемент).
Данное решение выглядит симпатичней. Будем пробовать.
Данное решение выглядит симпатичней. Будем пробовать.
0
Недавно делал такую линейку. Хватило text-align: justify; для контейнера и display: inline-block; для элементов. Ну и немного магии для старых браузеров. Предложенный способ сильно заморочен, на мой взгляд.
0
Поясню на примерах.
Если высота фиксирована и в контейнер можно поместить больше элементов, чем будет видно (то есть как минимум один будет скрыт, то можно сделать очень просто: jsfiddle.net/NNqPz/2/
Если же количество элементов неизвестно заранее или нельзя делать фиксированную высоту, то надо добавить в конце списка вспомогательный элемент, пример — jsfiddle.net/2vwWR/1/
Рецепт без JS, как видно.
Если высота фиксирована и в контейнер можно поместить больше элементов, чем будет видно (то есть как минимум один будет скрыт, то можно сделать очень просто: jsfiddle.net/NNqPz/2/
Если же количество элементов неизвестно заранее или нельзя делать фиксированную высоту, то надо добавить в конце списка вспомогательный элемент, пример — jsfiddle.net/2vwWR/1/
Рецепт без JS, как видно.
0
*Вместо jsfiddle.net/NNqPz/2 надо смотреть jsfiddle.net/NNqPz/3
+1
UFO just landed and posted this here
Не добавлять через добавление генерируемого контента ;) Да, спасибо за :after, не подумал об этом.
За разъяснение спасибо, убрать расстояние между элементами можно легко с помощью text-align: center, а вот облегание контейнером вплотную — да, задача посложнее.
Возьмём решение на заметку, Ваше в том числе — люблю без JS обходиться по мере возможностей.
За разъяснение спасибо, убрать расстояние между элементами можно легко с помощью text-align: center, а вот облегание контейнером вплотную — да, задача посложнее.
Возьмём решение на заметку, Ваше в том числе — люблю без JS обходиться по мере возможностей.
0
Да, тоже интересно было бы глянуть, где это может пригодится?
+2
Уважаемым комментаторам: вот пример — modelschel.ru/
Правда, способа этого не знал, пришлось реализовать на чистом JS.
Правда, способа этого не знал, пришлось реализовать на чистом JS.
+2
Спасибо за интересный пример. Вещь действительно полезная и мощная.
0
может я чего-то не понимаю — но в этом конкретном примере
display: inline-block;
который кстати там и стоит + wrapper с фиксированной высотой и overflow: hidden;
кросбраузерное решение — для ИЕ6-ИЕ7 (комбинация display:inline; zoom:1; position: relative; через селекторы
* html .selector //IE6 only
*+html .selector //IE7 only
)
поведение абсолютно такое же как в примере из статьи и в вашем примере.
display: inline-block;
который кстати там и стоит + wrapper с фиксированной высотой и overflow: hidden;
кросбраузерное решение — для ИЕ6-ИЕ7 (комбинация display:inline; zoom:1; position: relative; через селекторы
* html .selector //IE6 only
*+html .selector //IE7 only
)
поведение абсолютно такое же как в примере из статьи и в вашем примере.
+2
Всегда удивляют сайты, при отключённом JavaScript не отображающие вообще ничего. ;-)
+3
в черной теме на главной ссылка «Наши модели» становится белой на белом, было бы не плохо поправить.
0
Раз уж используется js, то почему бы не использовать только его?
+1
А зачем? Намного интереснее было бы лучше довести это решение до идеала, и вообще оказаться от CSS.
+2
Ну да, чистый css всегда лучше css+js, но раз не получилось обойти только им, и не получится в дальнейшем (IE8/IE9 не факт что быстро уйдут), то логичнее использовать компактный js-код.
0
Согласен, но, надеюсь, что тут найдётся тот мастер, который сможет довести это решение до ума.
+1
Я подозреваю, что в IE это останется и в последующих версиях: IE6 и 7 вычисляли значения по ширине родителя, последующие версии помнят изначальную ширину потомка. Не думаю, что в IE10 и далее от этого откажутся.
Так что надеяться надо не на уход браузеров, а на существование способа избавиться от js с тем, что есть сейчас. Я пока не нашел этого способа.
А вообще вы, наверное, правы: чем смешивать css и js, лучше обойтись одним, тем, что работает везде.
Так что надеяться надо не на уход браузеров, а на существование способа избавиться от js с тем, что есть сейчас. Я пока не нашел этого способа.
А вообще вы, наверное, правы: чем смешивать css и js, лучше обойтись одним, тем, что работает везде.
0
Далеко за примером ходить не надо: резайз на artlebedev.ru
0
Я бы добавил в список примеров еще элементы оформления, где одна неоднородная повторяющаяся по-горизонтали картинка должна в определённом месте стыковаться с другой, стационарной. Какая-нибудь изощренная рамка у блока, скажем. Это абстракция, но можно, думаю, найти и конктерный пример.
0
Честно говоря сомнительно применение данного кода. Если все равно нельзя использовать CSS, даже со всем ухищрениями и приходится использовать JS, то уж и использовать его полностью. Знаем размеры окна, знаем размеры элементов. По нужному алгоритму все воспроизводим. Ну как то так :-)
0
UFO just landed and posted this here
/display: inline; /* ну да, грязный хак для IE6 */
Слеш перед display: inline можно убрать, чтобы код стал валидным. Все равно float в браузерах постарше сделает элемент блочным.
+2
chrome 15.0.874.121 m/Win
скакать размер контейнера скачет, но размер li.item по какой-то причине получается 201px — все впечатление от демки портит:
habrastorage.org/storage1/c4544c6d/156cd253/c3ccc91b/21095ef0.png
скакать размер контейнера скачет, но размер li.item по какой-то причине получается 201px — все впечатление от демки портит:
habrastorage.org/storage1/c4544c6d/156cd253/c3ccc91b/21095ef0.png
0
Была похожая задача: есть дата (например, 1 января или 25 июня, т.е. переменной длины), которая находится в красивом блоке с цикличным бэкграундом и шириной зависящей от контента. Бэкграунд нельзя просто взять и оборвать, т.к. он волнистый и повторяется с шагом в 7 пикселей. Я вспомнил про эффект табуляции.
Между x и y стоит знак табуляции. Как только ширина символов до табуляции достигает ширины табуляции — она «отпрыгивает», отбрасывая контент после себя на максимальную ширину табуляции. Если взять эту ширину под контроль, то можно добиться, чтобы ширина элемента всегда была кратной нужному нам значению. Шириной табуляции проще всего манипулировать с помощью начертания и размера шрифта. И это работало! Но во всех браузерах по разному. Если под нормальные браузеры удалось подстроиться, то под Оперу не получилось — она плевала на размеры шрифтов и всегда делала табуляцию такой как ей хочется. Даже знаменитое оперовское -o-tab-size толком никак не помогло :(
В итоге сделал фиксированную ширину. А ведь светлое будущее было так близко! Гори в аду Опера.
x y
xx y
xxx y
xxxx y
xxxxx y
Между x и y стоит знак табуляции. Как только ширина символов до табуляции достигает ширины табуляции — она «отпрыгивает», отбрасывая контент после себя на максимальную ширину табуляции. Если взять эту ширину под контроль, то можно добиться, чтобы ширина элемента всегда была кратной нужному нам значению. Шириной табуляции проще всего манипулировать с помощью начертания и размера шрифта. И это работало! Но во всех браузерах по разному. Если под нормальные браузеры удалось подстроиться, то под Оперу не получилось — она плевала на размеры шрифтов и всегда делала табуляцию такой как ей хочется. Даже знаменитое оперовское -o-tab-size толком никак не помогло :(
В итоге сделал фиксированную ширину. А ведь светлое будущее было так близко! Гори в аду Опера.
0
Sign up to leave a comment.
Изменение ширины элемента с «шагом» в несколько пикселей