Несколько div в ширину

[sobachnik]

Раньше делал список фотографий всегда в табличках, но не нравится при этом то, что превьюшки не всегда одинаковые по высоте и ширине и иногда получается остаётся много свободного места на страничке... Например, поменяли в конфиге стандартный размер превью и скрипт начал штамповать превьюшки 100px по большей стороне вместо бывших 200. Ну или глупый пользователь загрузил фотографию, у которой размеры оригинала 100 пикселей :-) Запрещать загружать такие картинки не хочу - ругаются.

В общем идея простая - показывать фотографии вообще без таблицы, просто ставить им отступы (margin), чтобы не прикасались и вертикальное выравнивание делать по центральной линии (мне так кажется лучше выглядит), но в документ их вставлять просто одну за одной через пробелы. Без таблицы. Браузер сам автоматически рассчитает сколько их по ширине поместиться и в нужном месте перенесёт на новую строку.

И всё бы хорошо и это работает, но вот нужно мне стало прикручивать к каждой картинке ещё и пару маленьких ссылок (удалить, например). Хочу их вставлять под картинкой. Начал вставлять их в div-ы, а сами дивы - через пробел, но это не работает, они друг под другом идут. Если использовать css-атрибут float, то тут тоже косяк - всё было бы хорошо, если бы размер всех div-ов по вертикали был одинаковый. Но он разный (зависит от размеров превью). И получается, что если после бОльшего по вертикали div-а идёт менее вытянутый, то под ним непременно встанет ещё один и получается бред. Следующая строка может быть наполовину или вообще полностью почти пустая.

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

[npofopr]

ммм... никак? хотя я наверно вру. но все равно надо строку оборачивать в еще один див. сами по себе дивы не поймут что они в одной строке и не выстроятся вам с одной высотой.

гуру поправят

вы когда дом строите у вас как кирпичи кладутся?

[stars]

Ну есть вариант оборачивать строку дивов одним общим дивом после прогрузки страницы ширина то известна с помощью js. Но это геморно, проще по моему задать дивам одинаковую высоту(все равно превьюшки) картинки выравнивать по середине диву задать overflow: hidden;

Edited July 27, 2010 by stars

[Great Rash]

npofopr, stars, что-то вы не в ту степь полезли...

http://www.alexilin.ru/cross-browser-inline-block/

[stars]

npofopr, stars, что-то вы не в ту степь полезли...

http://www.alexilin.ru/cross-browser-inline-block/

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

[sobachnik]

Спасибо всем большое, помогли!

Особенная благодарность Great Rash за ссылку на хорошую и понятную статью!