Расположить блок слева по ширине родительского блока

Тема в разделе "Верстка", создана пользователем verfaa, 17 июн 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    375
    Симпатии:
    41
    Есть код:
    Код:
    <div id="mail_yes">
        <div id="m_ic">
           <i class="demo-icon" style="font-size: 30px;"></i>
        </div>
    Астрономам удалось определить ближайший из известных пролетов звезды мимо нашей Солнечной системы:...
    </div>
    css:
    Код:
            
    #mail_yes {
                border: 5px solid #f0a43d;
                border-radius:25px;
                -moz-border-radius:25px;
                -webkit-border-radius:25px
            }
    
            #m_ic {
                background-color: #f0a43d;
                border-radius:15px 15px 0 0;
                -moz-border-radius:15px 15px 0 0;
                -webkit-border-radius:15px 15px 0 0;
            }
    
    Сейчас он выглядит следующим образом:
    [​IMG]

    Мне необходимо сделать, чтобы оранжевый блок m_ic с иконкой письма прижимался к левой стороне родительского блока mail_yes и занимал 100% высоты этого блока. Подскажите как это сделать пожалуйста, лучше всего максимально кроссбраузерно, я в верстке не силен.
     
  2. zALEHANz

    zALEHANz Постоялец

    Регистр.:
    26 апр 2015
    Сообщения:
    50
    Симпатии:
    22
    Не совсем понятно ТЗ, вам конвертик сдвинуть влево? А насчет 100% высоты блока родителя, это как? Вы хотите повесить на него ссылку, что бы по клику в любом месте mail_yes реагировала?
    Или имелось ввиду вот так Перейти по ссылке
     
    Последнее редактирование: 18 июн 2015
  3. guru31337

    guru31337 Постоялец

    Регистр.:
    8 сен 2012
    Сообщения:
    60
    Симпатии:
    28
    Через display:flex думаю будет проще всего. Если правильно понял задание, то вот готовое решение: Перейти по ссылке
     
  4. EuRo1985

    EuRo1985 Постоялец

    Регистр.:
    21 апр 2015
    Сообщения:
    99
    Симпатии:
    7
    Через flex совсем некроссбраузерно получается.
     
  5. guru31337

    guru31337 Постоялец

    Регистр.:
    8 сен 2012
    Сообщения:
    60
    Симпатии:
    28
    Да, есть такое... тогда вот еще проще. Просто делаем широкий левый бордер и отрицательный маржин и всё...) Перейти по ссылке
     
  6. EuRo1985

    EuRo1985 Постоялец

    Регистр.:
    21 апр 2015
    Сообщения:
    99
    Симпатии:
    7
    Это ближе к правде :)
     
  7. perfectartyshock

    perfectartyshock Создатель

    Регистр.:
    9 сен 2014
    Сообщения:
    32
    Симпатии:
    10
    Навскидку как-то так Перейти по ссылке . Но я добавил <p> к тексту. Любой текст на сайте должен быть завернут в параграф. Как реализовать чтобы иконка занимал 100% блока автоматически нужно подумать
     
  8. guru31337

    guru31337 Постоялец

    Регистр.:
    8 сен 2012
    Сообщения:
    60
    Симпатии:
    28
    Вы тут задаете фиксированную высотку блока и если у нас будет несколько больше теста, то получаются страшные вещи - Перейти по ссылке
     
  9. perfectartyshock

    perfectartyshock Создатель

    Регистр.:
    9 сен 2014
    Сообщения:
    32
    Симпатии:
    10
    Ага, выдал решение по быстрому, чтобы показать возможность центрирования элемента по высоте. но спасибо что указали. большинство способов завязаны именно при указании высоты блока( Но эта задачка показалась мне интересной и я еще думаю над ответом)
     
  10. guru31337

    guru31337 Постоялец

    Регистр.:
    8 сен 2012
    Сообщения:
    60
    Симпатии:
    28
    Как насчёт этого Перейти по ссылке ? На мой взгляд очень универсально, я уже давал эту ссылку чуть выше.
     
    perfectartyshock нравится это.
Статус темы:
Закрыта.