12 октября 2012 г.

Как разместить рядом несколько картинок?


Иногда бывает очень надо)), чтобы картинки в посте были размещены в один ряд.

Можно сделать коллаж, конечно. Я почему-то не очень люблю коллажи, особенно их делать)) видимо наелась ими в свое время.

Можно сделать с помощью выравнивания, но это ТАК криво работает в блоггере, что проще вообще не делать)

Расскажу, как вставляю картинки в пост я.


Сразу скажу, есть и другие способы. Но я привыкла именно к такому способу, потому что этот блог - не первый мой веб-проект, до этого я сама делала сайт, а точнее интернет-магазин детских вещей, делала его на платформе wordpress и перелопатив много инфо по вставке картинок, остановилась на этом способе.

Заранее ответив на ваш вопрос, напишу, что интернет-магазин я давно продала (у меня была 1/2 часть). Сейчас я с грустью захожу на его сайт и вижу, что сайт совсем не ведется и не обновляется. Дизайн переделан...точнее изуродовано то, что создавалось с таким трудом. Но это уже не мое дело, что очень хорошо)


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

Сложно, скажете вы? Зато работает и вы не зависите от глюков визуального редактора. А раз прописав код таблицы, вы можете его просто копировать из поста в пост.

Начнем?

Например, нам нужно разместить в один ряд три картинки:







1. Для этого создадим сообщение и написав текст, остановимся в нужном нам месте и переключимся в режим HTML.

2. В режиме HTML вставляем код таблицы.


<table>
<tbody>
<tr>
<td>столбец 1</td>
<td>столбец2</td>
<td>столбец3</td>
</tr>
</tbody>
</table>

По коду видно, что теги 
<tr></tr> - означают начало и конец строки, а
<td></td> - начало и конец столбца.

Чтобы менять количество строк и столбцов, надо просто менять количество этих тегов и их содержимое (то, что будет внутри ;-))

Важно: теги  столбцов помещены внутри тегов строк, видите?


3. Возвращаемся в режим Создать.

Все страшные коды исчезли, остались только три слова в один ряд:
столбец1 столбец2 столбец3

4. Вставим первую картинку. Для поставим курсор перед словом "столбец 1" и обычным способом нажмем на вставку картинки. Получится вот так:

столбец 1
столбец2 столбец3


5. Вставляем вторую картинку, для этого ставим курсор перед словом "стоблец2" и жмем на вставку картинки.

столбец 1
столбец2
столбец3

3. Тоже самое делаем и с третьей картинкой.

столбец 1
столбец2
столбец3


Слова "стоблбец 1", "столбец 2" и "столбец 3" можно удалить, выделив и нажав на Delete, а можно и заменить их на описание картинок.

Они также будут выравниваться в рамках столбцов таблицы.

Ляляля
Ляляляля
Ляляля

Смотрим на результат, задаем нужный размер картинок, можем сделать их ссылками ( здесь написано, как это сделать).

Вот такой способ. Пишите свои))

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

  1. Лена !!! супер ! спасибос !!! я только недавно об этом думала... видимо мысли витают в воздухе. Очень благодарна.

    ОтветитьУдалить
  2. Спасибо, Леночка. Ларчик вона но как открывался :))

    ОтветитьУдалить
  3. Спасибо, очень полезная информация

    ОтветитьУдалить
  4. Очень интересно, учту! Лена только ты два раза написала tr

    означают начало и конец строки, а
    начало и конец столбца."

    td столбцы да?

    ОтветитьУдалить
    Ответы
    1. хотела скопировать, но блоггер думает что я код вставляю)) поэтому удалила <>

      Удалить
  5. Лена, спасибо большое! Очень нужная информация и доступно объяснено)))

    ОтветитьУдалить
  6. Спасибо, Леночка! Мне очень необходимо было.

    ОтветитьУдалить
  7. Блин, а я ленюсь в HTML делать. По-началу в фотошопе делала, а сейчас вообще в Пикасе коллажи шлепаю, да и все. А так информация полезная, спасибо!

    ОтветитьУдалить
  8. Лена, спасибо!!! Очень нужная для меня информация-делать коллаж все таки долго, а картинки в посте вечно разбегались. Теперь буду собирать их в кучу)))

    ОтветитьУдалить
  9. Лена, спасибо большое! Инфа очень полезная!!!

    ОтветитьУдалить
  10. Спасибо большое!!! Вроде не сложно все выглядит. Даже я, ничего не понимая в кодах, все поняла. Попробую использовать в следующем посте, как раз предполагается много фотографий.

    ОтветитьУдалить
    Ответы
    1. Ура!!! У меня получилось! Спасибо!!!

      Удалить
  11. Спасибо огромное, это такая полезная информация !

    ОтветитьУдалить
  12. спасибо, Леночка! очень полезно для меня :)

    ОтветитьУдалить
  13. ))) ОЧЕНЬ РАДА ВАШИМ КОММЕНТАРИЯМ))

    ОтветитьУдалить
  14. Лен, какая ты молодец!!! Спасибо огромное за инфу, давно хотела показывать по две картинки рядом, как сделать не знала)))) Обожаю твой блог, за то, что здесь очень много полезного.... и красивого)))

    ОтветитьУдалить
  15. Ой,Лена. Сколько я над этим билась, а потом бросила, поборов свое желание.
    Еще один минус калложа - в данном случае нельзя увеличить отдельную картинку, чтобы детали рассмотреть
    Спасибо!!!

    ОтветитьУдалить
  16. Спасибо! Очень нужная и полезная информация!!!

    ОтветитьУдалить
  17. за это отдельное спасибо! потому как это убогое выравнивание блоггере надоело)

    ОтветитьУдалить
  18. скоро буду крутяцкой блогершей))) Леночка, муж просил у тебя узнать: где купить нат.кожу в Барне?

    ОтветитьУдалить
  19. Спасибо, благодаря вашим советам многое в блоговодстве становится простым и понятным:)

    ОтветитьУдалить
  20. О! Леночка!!! спасибо!!!! я все думала, как же это делать!
    Утащила мк:) просвещай нас еще!!!!

    ОтветитьУдалить
  21. Лен, спасибо тебе! Какая же ты труженица, мне даже стыдно за своё разгильдяйство и непролазную лень...

    ОтветитьУдалить
  22. Лена. спасибо тебе за такие объяснения!!! Ну очень нужные вещи пишешь!!!

    ОтветитьУдалить
  23. Лен, подскажи мне пожалуйста, я опубликовала пост, а у меня на первой фотографии какая-то крокозябра вылезла, что-то типа водяного знака, ты не знаешь что это и как от этого можно избавиться? Прям ерунда какая-то у меня с блогом!

    ОтветитьУдалить
    Ответы
    1. Олеся, даже не подскажу - глюк какой-то, удали и заново вставь фото, не поможет если, сохрани фото с новым именем и заново загрузи, потом вставь.

      Удалить
    2. У тебя получилось как-бы наложение уменьшенного фото сверху.

      Удалить
  24. Огромнейшее спасибо! Очень полезный пост !

    ОтветитьУдалить
  25. Ой, спасибо огромнейшее :) буду пробовать. Буквально сегодня сидела и думала, как бы это сделать :)

    ОтветитьУдалить
  26. Лен, спасибо большое! Получилось убрать! Ты-гений!

    ОтветитьУдалить
  27. уже применила полученные знания :))) спасибо большое, Лена!

    ОтветитьУдалить
  28. Леночка, ты чудо расчудесное!!!! Я люблю коллажи, но не все подходят для моей задумки. А тут все просто и легко получается!!!

    ОтветитьУдалить
  29. А можно еще мастер-класс как разместить фото в журнале, но что бы оно при нажатии не открывалось в новом окне, а открывалось как у Вас с черно-прозрачным фоном?:)

    ОтветитьУдалить
  30. Леночка, спасибо тебе огромное за информацию. Как же меня раздражало, что картинки не хотели становиться в один ряд, а теперь все получилось! Уже успешно применила в блоге!

    ОтветитьУдалить
  31. Леночка, ты тут такую полезную информацию озвучила!! Огромнейшее тебе спасибо! Сама очень часто мучусь с этими картинками и в результате во всех постах они у меня идут по одной в строке. Теперь буду знать, как вставить несколько :) Пойду тренироваться :) СПАСИБООООО :)

    ОтветитьУдалить
  32. Лена, спасибо! Очень нужная информация!!!

    ОтветитьУдалить
  33. Лена, огромное спасибо. Попробовала, всё получилось )))

    ОтветитьУдалить
  34. Спасибо огромное, буду пробовать! :)

    ОтветитьУдалить
  35. Лена, спасибо огромное!! Как и многие - не знала, как это сделать... И объяснения прочитала, подумала "У-у-у... Не справиться. Слишком хорошо помню, как на информатике ну совсем тупила с написанием программ." А оказалось очень даже просто. Получилось сразу и очень симпатично! Спасибо за ликбез!

    ОтветитьУдалить
  36. Лена спасибо большое, я как вроде программист по образованию, но все забываю, что штмлможно вести в блоге и этого иногда намного проще) спасибо про секрет, что можно использовать таблицы))

    ОтветитьУдалить
  37. Леночка спасибо. Попробовала, получилось. Правда не поняла, а как размер картинок задавать?

    ОтветитьУдалить
  38. Лена,спасибо! Всё получилось:)

    ОтветитьУдалить
  39. Огромное спасибо! Так замечательно получилось!

    ОтветитьУдалить
  40. Лена, спасибо большое ))) Как всё оказывается просто )

    ОтветитьУдалить
  41. Вот это зачетная тема!!! Спасибо!!!

    ОтветитьУдалить
  42. Спасибо, Леночка!!! Очень просто получилось!!! Благодарю за действительно нужные советы, как начинающий пользователь постоянно ими пользуюсь =)

    ОтветитьУдалить
  43. Лена, спасибо, давно думала как это сделать, очень помог ваш пост!

    ОтветитьУдалить
  44. Спасибо большущее! Как мне это сейчас помогло...

    ОтветитьУдалить
  45. преогромнейшее спасибочки за совет!

    ОтветитьУдалить
  46. Лена! Спасибо большое ! Мучилась с картинками в ряд. Получилось всё, но когда я стала удалять название "столбец 1 и т.д фотки опять сдвинулись и началась чехарда! Что же я не так сделала? Помогите пожалуйста!

    ОтветитьУдалить
    Ответы
    1. вы нарушили код, удалите код и сделайте все заново

      Удалить
  47. Здоравствуйте Лена! ...и второй вопрос- создала в фотошопе хедер а как в блог установить не знаю... Простите неумёху. Помогите пожалуйста.

    ОтветитьУдалить
    Ответы
    1. раздел Дизайн - изменить заголовок, туда вставляете картинку или текст

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

    ОтветитьУдалить
  49. А что делать если поставив 2-3 картинки таким методом в ряд при публикации они некрасиво размываются в ширину?почему это происходит?((

    ОтветитьУдалить
    Ответы
    1. надо задавать правильные размеры для фотографий.

      Удалить
  50. Спасибо большое. Тоже не получалось вставить рисунки в ряд. Главное так вовремя.

    ОтветитьУдалить
  51. Елена, спасибо большое за такой интересный и полезный блог. Действительно очень много нужного и полезного. Много чего для себя нашла )

    ОтветитьУдалить
  52. Спасибо огромное за эту информацию. Очень пригодилась!!!!!!!!!

    ОтветитьУдалить
  53. Огромное спасибо!!!!!!! Очень вовремя!
    Как раз выставляю 45 картинок в ряд :))))

    ОтветитьУдалить
  54. Сколько мучалась с этими картинками, вечно в блоггере они скачут как хотят, а таблица помогла сделать из картинок меню для блога. К тому же методом тыка научилась быстро, без кодов вставлять рядом две картинки,если интересно вот ссылка - http://trizza-handmade.blogspot.com/2013/07/blogger.html

    ОтветитьУдалить
  55. Анонимный20 июля 2013 г., 19:49

    Не получается текст и картинку в одну строку вставить - текст съезжает вниз, то есть начинается с конца картинки. А картинки вставляются без проблем.

    ОтветитьУдалить
  56. Большое спасибо за все Ваши статьи, они очень полезны! Но подскажите, пожалуйста, как все-таки после картинок перейти к написанию текста? Все вставляется без проблем, а потом чехарда - либо картинки скачут, либо текст формируется столбцом под каждой! Переделывала много раз, но, видимо, сама не смогу!

    ОтветитьУдалить
    Ответы
    1. И мне интересно- точно такая же проблема, невозможно выйти из режима таблицы.

      Удалить
    2. скорее всего вы удалили некоторые теги, корректируйте в формате html

      Удалить
    3. Да, просто начала набирать текст в формате хтмл- все получилось. Спасибо!

      Удалить
  57. А как их прижать друг к другу (код html есть какой-то)?

    ОтветитьУдалить
    Ответы
    1. друг к другу не прижимаются, только к границам столбцов

      Удалить
  58. Спасибо большое! Очень нужный урок, только что воспользовалась)))

    ОтветитьУдалить
  59. Еще вопрос. Не совсем по теме- но косвенно касающийся темы. Для поиска по коду использую клавишы ctrl+f. Почему-то поиск осуществляется только в видимой на экране части кода. Почему?

    ОтветитьУдалить
    Ответы
    1. не по теме - лучше поискать ответ в сети, возможно, такие настройки браузера.

      Удалить
  60. Спасибо за информацию, картинки вставились замечательно, но почему то они бледнее фоток, вставленных обычным способом, как бы в тумане и это отличие сильно видно, что не так? И можно как то убрать границы таблицы, чтобы они не были видны? (у меня правда wordpress)

    ОтветитьУдалить
    Ответы
    1. в wordpress может изначально быть настроен шаблон, как отображать таблицу, думаю, надо смотреть в коде шаблона. или ручками прописывать свойства таблицы в каждом сообщении - посмотрите в сети учебник по HTML словарь тегов, относящихся к таблице. или поищите готовые коды таблиц (с прописанными свойствами заливки, границ и т.п.)

      Удалить
  61. Спасибо большое! Сегодня воспользовалась Вашими подсказками.

    ОтветитьУдалить
  62. Благодарю за помощь! Сейчас как раз столкнулась с необходимостью этой функции для вставки картинок.

    ОтветитьУдалить
  63. Елена, спасибо! Очень понятное объяснение. У меня всё получилось.

    ОтветитьУдалить
  64. Где бы не читала - ну так непонятно описано, ну не для женщин с гуманитарным образованием, честное слово. У Вас - понятно и от этого кажется просто. Благодарю!

    ОтветитьУдалить
  65. Девушки, не смогла перечитать все комментарии, поэтому не знаю, советовали ли эту программу уже или нет. Есть очень удобная, лёгкая программка, называется Photoscape. Скачать её можно здесь.
    http://photoscape.org/ps/main/download.php
    Это бесплатно. Это не реклама)))Есть русский язык. Может для новых версий нужно поискать русификатор, не уверена.
    Я многим её советовала, все пока только благодарят.
    Фото в моём блоге обработаны только в этой программе.
    Спасибо за внимание. ))

    ОтветитьУдалить
  66. Спасибо, Елена! Предельно ясно, и сразу всё получилось.

    ОтветитьУдалить
  67. Добрый день! Случайно наткнулся на Ваш блог. Не подскажите, что это за плагин галереи изображений у Вас установлен? Что за Pin It? В Яндексе ничего не нашел такого...

    ОтветитьУдалить
  68. Спасибо! Очень полезная информация!

    ОтветитьУдалить
  69. ЛЕНА!!! Как всегда :все гениальное ПРОСТО. Неожиданно наткнулась на Ваше решение. Пошла пробовать. В других местах уж больно мудрено. Спасибо Вам. Становлюсь Вашей постоянной читательницей. Успехов Вам!

    ОтветитьУдалить
  70. Леночка!!! Вы - Прелесть- даже у меня получилось, хоть и не сразу. Важно не спешить.Преогромное спасибо! Успехов в Вашем творчестве!

    ОтветитьУдалить
  71. Спасибо огромное!Но подскажите как убрать границы таблицы? А то фотографии теперь в рамочке

    ОтветитьУдалить
  72. optimiziroval tak: http://www.mglass.lv/index.php/component/content/article?id=30 , spacibo!

    ОтветитьУдалить
  73. Аааа! Спасибо большое! Я поняла как это делать!))) счастья то сколько))

    ОтветитьУдалить
  74. Лена, спасибо, все очень доходчиво и понятно, даже для таких чайников как я) Буду теперь делать одностраничники для дочки http://indzakaz.blogspot.ru/

    ОтветитьУдалить
  75. Спасибо! Нужная и важная информация, а главное просто и понятно. Я долго искала информацию как разместить рядом несколько картинок. Информации много, но написано сложно, а у вас все просто и понятно. Спасибо.

    ОтветитьУдалить
  76. А как сделать чтобы на них можно было нажать и они открылись в увеличеном размере?

    ОтветитьУдалить
  77. отличное решени,спасибо за подсказку

    ОтветитьУдалить
  78. Огромное Вам спасибо, я столько мучилась с выравниванием, что волосы на голове дыбом встали. А вы за три клика решили мою проблему. Целую вас в обе щеки.

    ОтветитьУдалить
  79. Спасибо автору за познавательную инфу, но я не как не могу разобраться с шаблоны prestashop 1.6, который раз скачивал и ничего не получается! Может кто та работал с этими шаблонамы?

    ОтветитьУдалить

Я с большим удовольствием читаю ВСЕ ваши комментарии! Спасибо!!!