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

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

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

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

Демонстрация

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

<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.

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

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

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

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

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

Введите Ваш email