1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Решено] Небольшая сложность в реализации

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем AlexGood, 9 июл 2018.

Статус темы:
Закрыта.
  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Тестовая страница - http://testbcard.dtraduga.vh55.hosterby.com/my_orders.php
    В столбце "описание заказа" разное количество строк. При изменении разрешения в меньшую сторону, возникает проблема, т.к. текст наезжает на стикер над ним: https://prnt.sc/k4a4v8 Можно ли это как то иначе реализовать, чтобы такая проблема не возникала? И картинку слева прижать к верхней границе (точнее 15px от верхней полосы)?
     
    AlexGood, 9 июл 2018
    #1
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Потому что вы использовали абсолютное позиционирование, хотя в этом не было никакого смысла! Я уже говорил, оно только на крайний очень редкий случай.

    Добавить на контейнер .img_block_order это:
    Код:
    align-items: flex-start;
     
    Dotrox, 9 июл 2018
    #2
    AlexGood нравится это.
  3. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    - я пробовал, но оно почему-то не срабатывает
    Если absolute убираю, то ничего особо и не меняется.
    Может зря для нижних блоков использовал relative?
     
    AlexGood, 9 июл 2018
    #3
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Ну, так и остальные стили поправьте, отступы, например.
     
    Dotrox, 9 июл 2018
    #4
    AlexGood нравится это.
  5. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Картинка двигается вверх, только если ей делать absolute и top:15px, относительно родителя который relative. align-items: flex-start; - непонятно почему не работает.
    А все текста получается надо отрубать position: relative и двигать все просто маргинами я вас правильно понял?
     
    AlexGood, 9 июл 2018
    #5
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Не надо двигать картинку!

    Это всё, что надо сделать!
    И я не вижу, чтоб это сейчас было.
    Попробуйте это прямо сейчас в инструментах разработчика в браузере и увидите сразу эффект.

    Вы как-то неправильно воспринимаете position: relative - это для вас должен быть стандартный вариант позиционирования. Но при этом вы должны забыть о том, что при таком позиционировании можно использовать сдвиги с помощью top/bottom/left/right. Их надо использовать только в крайних случаях, когда margin по каким-то причинам не справляется или не подходит.
     
    Dotrox, 9 июл 2018
    #6
    AlexGood нравится это.
  7. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Все сделал как сказали, все стили поправил, перезалил - теперь красота :Music:
     
    AlexGood, 10 июл 2018
    #7
< Непонятки с отступом | Прописал viewport а на телефоне адаптивный сайт не работает. >
Статус темы:
Закрыта.