списки с разделителями

[cyklop77]

сверстал галерею на основе списков.структура такая:

4 изображения, разделитель, <ul>4 изображения</ul>, разделитель, и т.д.

использовал несколько блоков <ul></ul>. правильнее было бы использовать один блок <ul></ul> (потому что на cms удобнее натягивать).

подскажите пожалуйста как верстаются подобные галереи.

необходимые условия:

1. галерея резиновая(тянется по горизонтали как в моем примере),

2. после каждой четвертой картинки есть разделитель

[Softlink]

Я где-то не увидел подвоха?

li{
display:inline-block;
width:25%;
}

Влезет четыре блока в строчку, остальные вниз уйдут. Галерея будет резиновой.

[cyklop77]

галерея будет резиновой. но меня больше беспокоит положение разделителей. нужно чтобы разделитель шел после каждого четвертого блока <li></li>.

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

[Softlink]

галерея будет резиновой. но меня больше беспокоит положение разделителей. нужно чтобы разделитель шел после каждого четвертого блока <li></li>.

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

Что понимается под разделителем??

[cyklop77]

галерея будет резиновой. но меня больше беспокоит положение разделителей. нужно чтобы разделитель шел после каждого четвертого блока <li></li>.

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

Что понимается под разделителем??

обвёл разделитель красной линией. картинка

[Justnewone]

Я где-то не увидел подвоха?

li{
display:inline-block;
width:25%;
}

Влезет четыре блока в строчку, остальные вниз уйдут. Галерея будет резиновой.

Скорее, 3, 4 перенесется из за невидимого символа

http://jsfiddle.net/UYBM7/

[cyklop77]

Justnewone, тоже вариант решения проблемы. но мне бы нужен более универсальный.

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

Edited November 30, 2011 by cyklop77

[Justnewone]

тогда удачи в поисках

[psywalker]

cyklop77, А строки имеют одинаковую высоту?

Justnewone, перехватил у тебя эстафету

[cyklop77]

да. строки все одинаковой высоты.

скорее всего, в реальной задаче будет неизвестное количество строк, но я был бы рад решению для определенного количества строк(например по 3 строки под каждым блоком с красной рамкой)

блоки с красной рамкой одинаковой высоты все. блоки <li></li> тоже все определенной одинаковой высоты

Edited November 30, 2011 by cyklop77

[SelenIT]

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

[psywalker]

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

Спасибо огромное, интересные решения! А можно ли сделать тоже самое, но для неизвестного кол-ва блоков в строке и неизвестной высоты?

[SelenIT]

Для неизвестного кол-ва вот сходу красивого решения не придумывается, к сожалению...

[psywalker]

Для неизвестного кол-ва вот сходу красивого решения не придумывается, к сожалению...

Жаль, но, если что, то я рядом

[Softlink]

обвёл разделитель красной линией. картинка

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

Скорее, 3, 4 перенесется из за невидимого символа

Так вроде все уже научились бороться с этой проблемой особенностью.

Спасибо огромное, интересные решения! А можно ли сделать тоже самое, но для неизвестного кол-ва блоков в строке и неизвестной высоты?

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

[SelenIT]

Softlink, в этом решении всё равно привязка к 4-м элементам в строке стоит изменить ширину, скажем, на 20% (5 в строке) — уже получается некузяво...

[Softlink]

Softlink, в этом решении всё равно привязка к 4-м элементам в строке стоит изменить ширину, скажем, на 20% (5 в строке) — уже получается некузяво...

Ммм.. поясни пожалуйста. Вроде бы все нормально отрабатывает. В пятой строке ширина элементов по 10%.

Или так, если элемент будет одновременно первым и последним

upd Заметил, что фон некрасиво отрабатывает. *При изменении размеров окна.

Edited December 1, 2011 by Softlink

[SelenIT]

Я имел в виду, что если изменится ширина блока, то и множитель в nth-child придется менять соотв-но, иначе будет так. А значит, для "неизвестного кол-ва блоков в строке" способ уже не подходит.

Хотя идея с инлайн-блоками и псевдоэлементом для первого блока следующей строки мне очень понравилась, красивее моей идеи с отменой float для последнего в ряду! Вроде даже ее еще чуть упростить можно...

Edited December 1, 2011 by SelenIT

[Softlink]

Я имел в виду, что если изменится ширина блока, то и множитель в nth-child придется менять соотв-но, иначе будет так. А значит, "неизвестного кол-ва блоков в строке" способ уже не подходит.

Ну это да. Смотреть надо по ситуации.

Хотя идея с инлайн-блоками и псевдоэлементом для первого блока следующей строки мне очень понравилась, красивее моей идеи с отменой float для последнего в ряду. Вроде даже ее еще чуть упростить можно...

А здесь это уже не упростить называется, а качественно улучшить Я покрутил-покрутил паддингами, но до конца не дотумкал, как все-таки лучше реализовать.

[cyklop77]

применил указанные решения в реальной задаче. проблемы две:

1. не смог допилить (расположение разделителей не как в макете)

2. заказчик требует кросс до ie7+

нельзя ли поправить вёрстку хотя бы при помощи jquery?

пробовал делать разделитель через li {border-bottom: 1px dotted #000;} в результате по краям блока <li></li> нарушается периодичность расположения точек

Edited December 23, 2011 by cyklop77