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

Посмотрите сами, что имелось в виду и публикую код ниже, как это реализовать.
Код достаточно лёгкий. Мне очень понравился этот вариант когда необходимо было показать картинку до события и после. Вообще так можно сделать просто красивый альбом с подписями и текстом внутри страницы. Сначала подготовьте адреса своих картинок. Скопируйте приведённый ниже код и всё разберём по полочкам.
<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.
С размерами изображений потом можно поиграться там же в редакторе. С цветом и стилями текста под картинкой тоже. Можно добавлять сколько угодно таких блоков с картинками.
После установки кода в обычно режиме и в режиме предварительного просмотра это будет выглядеть примерно так
Не беспокойтесь, эффект появится после публикации поста. Как красиво смотрится такой вариант в полноэкранном варианте. Скопируйте весь код и вставьте в этот редактор для просмотра. Придумайте свои решения такого размещения фото в блоге.
Я желаю вам удачи. Спасибо всем за внимание.

Не беспокойтесь, эффект появится после публикации поста. Как красиво смотрится такой вариант в полноэкранном варианте. Скопируйте весь код и вставьте в этот редактор для просмотра. Придумайте свои решения такого размещения фото в блоге.
Я желаю вам удачи. Спасибо всем за внимание.
Получайте новые сообщения с блога прямо на почту
Виктория, интересный вариант вставки изображений! Пригодится! Сохранила для себя ссылочку на твой пост. Спасибо!
ОтветитьУдалитьИрина, обязательно попробуй. Я это делала в разных вариантах. так красиво смотрится.
УдалитьСпасибо!Интересно!
ОтветитьУдалитьТатьяна просто поэкспериментируйте. Оно того стоит.Я игралась с разными вариантами. Просто супер.
ОтветитьУдалитьТо есть этот текст - это как бы подпись под фото, да? А то я в праздники плоховато соображаю :)
ОтветитьУдалитьВика, с Новым годом тебя и всю твою семью! Всего самого-пресамого наипрекрасного!
Нормально ты соображаешь. В точку. Спасибо за поздравления, тебе и семье тоже всех благ.
Удалить