Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Аналог text-align="justify" для изображений
Аналог text-align="justify" для изображений
Амо
Сообщений: 95
Репутация: 4

Сообщение # 1 | 11:40:38
Три картинки стоят в ряд, мне нужно раздвинуть их от начала и до конца поля. Для текста подходит text-align="justify" в таких случаях.

Сейчас так:

<a href="$IMG_URL1$"><img alt="Скриншот из фильма $ENTRY_TITLE$ / $AUTHOR_SITE$" class="screenshots" src="$IMG_SMALL_URL1$" width="170" height="100" /></a>
<a href="$IMG_URL2$"><img alt="Скриншот из фильма $ENTRY_TITLE$ / $AUTHOR_SITE$" class="screenshots" src="$IMG_SMALL_URL2$" width="170" height="100" /></a>
<a href="$IMG_URL3$"><img alt="Скриншот из фильма $ENTRY_TITLE$ / $AUTHOR_SITE$" class="screenshots" src="$IMG_SMALL_URL3$" width="170" height="100" /></a>

в CSS:
.screenshots {border: 3px solid #e3e3e3; outline: 1px solid #292929;}
killbit
Сообщений: 317
Репутация: 104

Сообщение # 2 | 15:43:01
Сайт бы, вроде ясновидящих нету smile надо наверное смотреть на контейнер в котором они выводятся
Сообщение отредактировал killbit - Суббота, 28 Мар 2015, 15:48:20
Head-Mad
Сообщений: 368
Репутация: 128

Сообщение # 3 | 17:00:44
Амо, привет оберни это всё в блок, например .screen-wrap и задай ссылкам тоже класс:
Код
<div class="screen-wrap">
<a href="$IMG_URL1$" class="screen-link"><img alt="Скриншот из фильма $ENTRY_TITLE$ / $AUTHOR_SITE$" class="screenshots" src="$IMG_SMALL_URL1$" width="170" height="100" /></a>   
<a href="$IMG_URL2$" class="screen-link"><img alt="Скриншот из фильма $ENTRY_TITLE$ / $AUTHOR_SITE$" class="screenshots" src="$IMG_SMALL_URL2$" width="170" height="100" /></a>   
<a href="$IMG_URL3$" class="screen-link"><img alt="Скриншот из фильма $ENTRY_TITLE$ / $AUTHOR_SITE$" class="screenshots" src="$IMG_SMALL_URL3$" width="170" height="100" /></a>
</div>


Теперь - стили:
Код
<style>
.screen-wrap{
   text-align: justify;
   text-justify:newspaper;
   width:100%
}

.screen-wrap:after{
content:'';
display:inline-block;
width:100%;   
}

.scree-link{
   display:inline-block;
   vertical-align:top;
   width:200px;
   height:200px;
}

.screenshots {
border: 3px solid #e3e3e3;
outline: 1px solid #292929;
}
</style>


Кроме того, если ориентироваться на более свежие браузеры, то можно посмотреть в сторону Flex

Можешь забрать этот код и вставить его себе, сам знаешь куда.
Сообщение отредактировал Head-Mad - Суббота, 28 Мар 2015, 17:02:57
Амо
Сообщений: 95
Репутация: 4

Сообщение # 4 | 15:54:56
Спасибо )
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Аналог text-align="justify" для изображений
Страница 1 из 11
Поиск: