0

Ребята, кто знает в чем проблема, как сделать так, чтоб "слуха и речи" не прижимались к картинке?

Ребята, кто знает в чем проблема, как сделать так, чтоб "слуха и речи" не прижимались к картинке?

Теперь так Теперь так

  • Лор
  • Сурдолог
  • Сурдопедагог
  • Логопед
  • Невролог
  • Слухопротезист
  • Реабилитация для пациентов с нарушением слуха и речи
  • Офтальмолог
  • Физиолечение
  • Массаж

.med-wrap
    img
        float: left
        width: 200px
        max-width: 90%  
    ul
        list-style-type: none
        padding-top: 0px
        li
            font-size: 16px
            a
                color: #535353
                margin-left: 27px
                .fa
                    color: $grc
                    margin-right: 8px
2
  • Позиционируйте изображение для списка через псевдоэлементы jsfiddle.net/soledar10/r7bdfvLz
    – soledar10
    18 фев 2017 в 14:08
  • линии улетают за картинку 18 фев 2017 в 14:32

2 ответа 2

1
  1. Может быть ширина блока, если страница разделена на них.
  2. Позиционирование возможно.
  3. добавьте отступ от картинки(чтоб отодвинуть список)

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

Добавляю.. никогда не ставьте для img width:200px, это свойство должно быть у блока или элемента в котором непосредственно хранится img. Свойства для img всегда должны быть такими:

width:100%;
max-width:100%;(или сколько там нужно)
13
  • Добавил стили, посмотрите пожалуйста :) 18 фев 2017 в 14:04
  • @YourDeveloper вы не совсем их добавили, где все те классы, которым заданы стили... 18 фев 2017 в 14:07
  • ситуация немного изменилась, а как теперь "нарушением ... "сдивнуть, чтоб четко под текстом было ? 18 фев 2017 в 14:32
  • Сделать вот эту зеленую линию псевдоэлементом. Потому что "нарушением" переносится на следующую строку, и становится в Ее начало. А верхняя строк начинается с элемента списка, и только потом идёт сам текст. 18 фев 2017 в 14:37
  • А чтоб линии не улетали, нужно разобраться с позиционированием (position) 18 фев 2017 в 14:38
0

Дайте родительскому блоку,содержащиму блоки с картинкой и списком display:flex;

#parent{display:flex}    

<div id="parent">
  <div><img ... /></div>
  <div><ul> ...</ul></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.