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

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


1 способ, он предназначен  для 2х картинок в ряд, хоть и верстальщики его называют примитивный  для новичков,  я считаю, он подойдет, да и  мучиться не долго.
 
до изменений




после изменений 


И так начнем:
Пишем свой текст и загружаем несколько картинок, показываю пример правки одной картинки

Что бы не запутались вот так код  выглядит


 После добавления второй картинки код уже будет выглядит вот так:


Теперь нам нужно удалить вот этот код в самом начале <br />
<div class="separator" style="clear: both; text-align: center;">
и межу картинками
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
и в конце
</div>
<br />

 а вместо него нужно  вставить вот этот код


<table>
<tr>
<td> 
Здесь код первой картинки.
</td>
<td> 
Здесь код второй картинки.
</td>
</tr>
</table> 


То есть код HTML будет иметь такой вид


На этом все, второй способ опишу уже завтра
Код был взят от сюда

14 коммент.:

  1. А я как чайник, по старинке делаю - одну картинку выровнять по левому краю, другую - по правому, потом чуть с размерами поэкспериментировать, а то иногда не влезает в ряд, и все :D Но получается не всегда симпатично. Надо попробовать как Вы говорите, так что спасибо за науку! :)

    ОтветитьУдалить
    Ответы
    1. Ирина рада что смогла помочь, способ конечно только на 2 картинки, но заморачиваться меньше. Сегодня просто нет сил еще одну статью писать там до 4 шт в строчку можно поместить, правда повозиться нужно будет:)
      До того как нашла эти коды тоже с картинками также мучалась

      Удалить
  2. Анна, спасибо за статью! У меня получилось вот так http://maminydochki.blogspot.ru/2013/01/blog-post_10.html.
    Как-нибудь потренируюсь по ч картинки в ряд. Очень рада. что знакома с этим блогом и с вами( тобой??)

    ОтветитьУдалить
    Ответы
    1. Альфия видела очень чудесные пингвины:) Меня можно на ты, я как Карлсон в расцвете сил:) Тоже рада знакомству!

      Удалить
  3. Видимо, я даун, попробовала, ничего не поняла (не разобралась) делаю по старому выравнивая то спрва то слева(((

    ОтветитьУдалить
    Ответы
    1. Ольга не отчаивайтесь, мне тоже по началу было сложно! Теперь легче, и то вечно путаюсь. Немного времени и тренировок:)и у вас все выйдет!

      Удалить
  4. Спасибо за урок, Анечка! Я тоже новичок в блоговедении , так что буду постигать науку писания Блога вместе с вами!
    Спасибо за урок! Надо приступить к выполнению:))

    ОтветитьУдалить
  5. Анна, а у меня не получается - когда вставляю выскакивает сообщение "Ваш код HTML не может быть принят: Закрывающий тег без соответствующего открывающего тега: DIV". И не совсем понятно куда вставлять код второй картинки? Если мы удаляем коды в самом начале, затем между картинками и в конце. Зачем тогда код второй картинки? Если смотреть всё в кодах, то почему-то указано как бы четыре кода картинок вместо двух?? Как быть??!!

    ОтветитьУдалить
    Ответы
    1. попробую детально объяснить
      первый код это как бы длина картинки, второй код это как бы ширина, если 2 картинки то получается 4 кода.
      Да при стирании центрирования выскакивает что тег не закрыт, но если вставить тот код что я показала и обновиться, этого всплывающего окна не будет.
      Мы удаляем код центрирования картинок, а не код самих картинок, то есть смещаем их, вставляя предложный код < table >
      < tbody >
      < tr >
      мы размещает расстояние между ними по горизонтали.

      Удалить
    2. Аня, теперь у меня другая проблема - картинки встали рядом. вместе, но они очень широкие, т.е. одна "вылезает" за рамки и заходит на территорию других разделов. Как быть в этом случае???

      Удалить
    3. Лана посмотри внимательно на код и найди это значение width="будет размер" его нужно подогнать под нужную ширину.
      Мне немного проще я знаю что ширина моих постов она равна 460, а значит что бы мои картинки не вылазили за территорию мне нужно указать например вместо width="430" на width="230" для одной картинки и так же для второй

      Удалить
  6. Аня, я экспериментировала раз 5, наверное... Что бы понять принцип. Но ты, не упомянула, что необходимо внести коррективы в размер картинки. Я это уже делала вручную. В блоге Веры Борок http://veraborok.blogspot.ru/2011/09/blog-post_23.html об этом говорится. Может это кому-то поможет. После корректировки размеров у меня всё встало на место!

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

Есть вопросы? Или просто хочется поговорить? Оставляйте комментарии