Плотное размещение изображений

[sergeyvolk]

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

Как сделать чтобы все изображения плотно прилегали друг к другу? Для каждого изображения используется класс <div class=gallery-thumb">

Заранее спасибо за ответ

[klierik]

.gallery-thumb img { display: block; }

хотя, а ну ка дай ссылку на страницу, может ты там отступы/поля добавил.

[sergeyvolk]

Я бы сразу дал ссылку, да вот это я у себя на компе делаю.

К сожалению не сработало. Ах да, забыл:

.gallery-thumb {
float: left;
padding: 3px;
margin-right: 10px;
margin-bottom: 10px;
}

[sigma77]

sergeyvolk,

Может тебе нужно

.gallery-thumb {
    display: inline-block;
    vertical-align: top;
}

/* Для ИЕ7 и ниже */
.gallery-thumb {
    display: inline;
    vertical-align: top;
    zoom: 1;
}

Покажи картинку, что должно получиться.

[Great Rash]

ЧаВо

[sergeyvolk]

Great Rash, sigma77, спасибо вам за ответы!

Покажи картинку, что должно получиться.

вот что получилось:

Нужен вот такой результат (это я немного отредактировал в фотошопе):

[Great Rash]

Такого результата без яваскрипта добиться не получится.

[SelenIT]

Ну почему ж так обреченно... Но мороки многовато (вертикальные отступы в IE почему-то больше, со старыми Операми непонятно что делать...).

[sergeyvolk]

SelenIT , спасибо, помогло!!!

Поставил бы всем плюсики кто тут отписывал, да видно новичкам нельзя изменять репу.

[Great Rash]

Ну вот так в хроме... Все-таки мультиколоночная верстка недоработана...

[SelenIT]

Да, этот пример был слишком сырой. Вот так чуть лучше в Хроме, Опере и IE. Имхо, дело не в самой колончатой верстке, просто я не умею ей грамотно пользоваться. Вообще для этой задачи идеальным решением было бы одно лишь writing-mode: tb-lr, но оно, насколько я понял, работает только в IE8+. Поэтому и пришлось комбинировать разные подходы (writing-mode для новых IE, мультиколонки без просветов для остальных, а для старых IE — теоретически, начиная с 5.5, в моем примере по факту с 7 из-за max-height — подпереть костылем layout-flow: vertical-ideographic, с которым картинки на первый взгляд выглядят нормально, но колонки идут справа налево, как в японском письме). И word-spacing пришлось убрать (для IE — потому что картинки фактически интерпретируются как слова из иероглифов, для Оперы и Вебкита — я сам не понял, почему)...

[sergeyvolk]

Я вот тут ещё подумал: реально ли с помощью CSS сделать выравнивание картинок по верхнему и нижнему краю? Или это только при помощи js?

[SelenIT]

Можно, но не для любых условий.

[sergeyvolk]

В примере поделили блоки на 2 класса, в моем же случае это изображения и добавляются они из админки, я никак не могу поделить их на 2 разных класса, но всё равно спасибо!