Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

как красиво встроить в сообщение два изображения с текстом и описанием

Всем, доброго времени суток. Как красиво расположить  картинки с описанием и нужным текстом на странице параллельно друг другу.

картинки в тексте

Не знаю, правильно ли я назвала свой сегодняшний пост, но одна из моих читательниц задала такой вопрос и даже прислала скриншот. Я в свою очередь переправила её на свою статью несколько вариантов оформления картинок в блоге. Но это оказалось немного не то, что нужно было.

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


Код достаточно лёгкий. Мне очень понравился этот вариант когда необходимо было показать картинку до события и после. Вообще так можно сделать просто красивый альбом с подписями и текстом внутри страницы.  Сначала подготовьте адреса своих картинок. Скопируйте приведённый ниже код и всё разберём по полочкам.

<style> 
 * {   -moz-box-sizing: border-box;   -webkit-box-sizing: border-box;   box-sizing: border-box; } .image_2column {   width: 50%;   float: left;   text-align: center;
}
.image_2column img {
  width: 100%;
  height: 450px;
  display: block;
}
.image_2column p {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}
.image_2column.left {
  padding-right: 10px
}
.image_2column.right {
  padding-left: 10px
}
.clear {
  clear: both;
}
@media screen and (max-width:414px){
  .image_2column {
  width: 100%;
  float: none;
  margin-bottom:20px;
  }
  .image_2column.left {
  padding-right: 0
  }
.image_2column.right {
  padding-left: 0
  }
}</style>

<div class="image_2column left">
<img alt="Полищук" src="http://ahuman.ru/wp-content/uploads/2012/03/36549.jpg" height="292" title="Любовь Полищук" width="400" />
  <br />
Любовь Полищук и Андрей Миронов Полищук в фильме "12 стульев"
  </div>
<div class="image_2column right">
<img alt="Любовь Полищук" src="http://ahuman.ru/wp-content/uploads/2012/03/21765689_161.jpg" height="292" title="Любовь Полищук" width="400" />
  <br />
Любовь Полищук и Анастасия Заворотнюк в сериале "Моя прекрасная няня
  </div>
<div class="clear">
</div>
Биография Любовь Полищук интересна и необычна, как и сама актриса. Родилась Любовь 21 мая 1949 года в городе Омске, в обычной, рабочей семье. Работал только один отец. С трудностями Любовь Полищук начала встречаться с детства. Любовь всегда с улыбкой преодолевала их. Веселая, казалось, беззаботная, полная надежд и имеющая мечту. Именно такая шестнадцатилетняя девочка отправилась в Москву к своей цели.
Благодаря своим певческим и танцевальным способностям в 1977 году Любовь Полищук дебютировала в кино. 
Параллельно с напряженной работой в театре Любовь Полищук заочно в 1985 году окончила актерский факультет Государственного института театрального искусства (ГИТИС) им. А.В. Луначарского.
<br />
<div class="image_2column left">
<img alt="Любовь Полищук" src="http://img0.liveinternet.ru/images/attach/c/1//48/604/48604396_3988b1.jpg" height="292" title="Любовь Полищук" width="400" />
  <br />
Кино 90 -е годы
  </div>
<div class="image_2column right">
<img alt="Любовь Полищук" src="http://img1.liveinternet.ru/images/attach/c/1//48/604/48604083_a05ebfd815161.jpg" height="292" title="Любовь Полищук" width="400" />
  <br />
80-е годы. Работа в кино
  </div>



Давайте разберём весь этот цветной код.

Любовь Полищук- это ваши собственные alt и title.

Кино 90 -е годы- описание под картинкой

http://img0.liveinternet.ru/images/attach/c/1//48/604/48604396_3988b1.jpg-адрес изображения

ГИТИС) им. А.В. Луначарского.- текст между картинками

Вставляйте то что вам нужно. Готовый код установите в редакторе сообщений в режиме HTML.

С размерами изображений потом можно поиграться там же в  редакторе. С цветом и стилями текста под картинкой тоже. Можно добавлять сколько угодно таких блоков с картинками. 

После установки кода в обычно режиме и в режиме предварительного просмотра это будет выглядеть примерно так

2 картинки в тексте

Не беспокойтесь, эффект появится после публикации поста. Как красиво смотрится такой вариант в полноэкранном варианте. Скопируйте весь код и вставьте в этот редактор для просмотра. Придумайте свои решения  такого размещения фото в блоге.

Я желаю вам удачи. Спасибо всем за внимание.


Получайте новые сообщения с блога прямо на почту

Введите Ваш email



6 комментариев:

  1. Виктория, интересный вариант вставки изображений! Пригодится! Сохранила для себя ссылочку на твой пост. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Ирина, обязательно попробуй. Я это делала в разных вариантах. так красиво смотрится.

      Удалить
  2. Татьяна просто поэкспериментируйте. Оно того стоит.Я игралась с разными вариантами. Просто супер.

    ОтветитьУдалить
  3. То есть этот текст - это как бы подпись под фото, да? А то я в праздники плоховато соображаю :)

    Вика, с Новым годом тебя и всю твою семью! Всего самого-пресамого наипрекрасного!

    ОтветитьУдалить
    Ответы
    1. Нормально ты соображаешь. В точку. Спасибо за поздравления, тебе и семье тоже всех благ.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML