+ Ответить в теме
Показано с 1 по 4 из 4

Тема: Перенос текста влево от картинки

  1. #1
    Новичок Suhoy на пути к лучшему Аватар для Suhoy
    Регистрация
    08.06.2018
    Сообщений
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Перенос текста влево от картинки

    Делаю по примеру, возникла небольшая проблема. Текст из-за малого количества символов переносится под картинку, хотя должен быть справа(ошибся в названии темы). Что не так делаю?


    <div class="post">
    <img src="img/img2.jpg" alt="">
    <h3>Доставка</h3>
    <p class="date">31.12.2016</p>
    <p>Отправим ваш товар в любую точку России и зарубежья </p>
    </div>



    .blog {
    clear: both;
    padding-top: 30px;
    padding-bottom: 50px;
    background-color: #fcfcfc;
    }
    .blog h2 {
    text-align: center;
    }
    .blog .post {
    padding-top: 30px;
    display: inline-block;
    }
    .blog .post img {
    float: left;
    margin-right: 30px;
    }
    Последний раз редактировалось Suhoy; 08.06.2018 в 22:35.

  2. #2
    Местный Degradator на пути к лучшему Аватар для Degradator
    Регистрация
    02.07.2012
    Сообщений
    1,905
    Thanks
    141
    Thanked 142 Times in 142 Posts
    Деградационные советы:

    не использовать padding-top: 30px; без необходимости. Скорее всего того же самого эффекта можно добиться добавив margin-bottom у предыдущего элемента. Следуя такой практике, ты сможешь использовать свой элемент где угодно, не беспокоясь за двойной отступ сверху.

    Не писать
    .blog
    при учете того, что в примере не используется этот класс.

    Не писать
    .blog h2
    при использовании в примере тега
    <h3>


    Попробуй замени вот это
    .blog .post {
    padding-top: 30px;
    display: inline-block;
    }

    На вот это
    .blog .post {
    padding-top: 30px;
    display: block;
    width: {посмотри размер картики} + {30px от правого отступа от картинки} + {200px место для текста}
    }

  3. The Following User Says Thank You to Degradator For This Useful Post:

    Suhoy (12.06.2018)

  4. #3
    Новичок Suhoy на пути к лучшему Аватар для Suhoy
    Регистрация
    08.06.2018
    Сообщений
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    h2 ипользуется в класссе .blog, но к данном примеру отношения не имеет, мой косяк.

    Насчет padding-top запомнил, спасибо)

    С display: block сам допер, но возникла такая проблема: если дать тексту всего 200px, то выглядит это не совсем красиво, а если увеличить до 500, например, то следующий пост съезжает и получается лесенка:



    Как сделать так, что бы мои посты шли просто друг за другом?

  5. #4
    Местный Degradator на пути к лучшему Аватар для Degradator
    Регистрация
    02.07.2012
    Сообщений
    1,905
    Thanks
    141
    Thanked 142 Times in 142 Posts
    Счас у тебя вот так
    https://ibb.co/my4oed

    Надо сделать вот так
    https://ibb.co/cY3v9d

+ Ответить в теме

Похожие темы

  1. Ответов: 1
    Последнее сообщение: 13.08.2013, 07:55
  2. Ответов: 11
    Последнее сообщение: 09.07.2013, 15:08
  3. Ответов: 2
    Последнее сообщение: 23.07.2012, 13:18
  4. Ответов: 4
    Последнее сообщение: 16.07.2010, 09:26
  5. textarea и перенос текста
    от exzibit в разделе CSS
    Ответов: 1
    Последнее сообщение: 11.06.2010, 04:59

Метки этой темы

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения