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

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

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

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    371
    Симпатии:
    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
    Сообщения:
    17
    Симпатии:
    6
    Не совсем понятно ТЗ, вам конвертик сдвинуть влево? А насчет 100% высоты блока родителя, это как? Вы хотите повесить на него ссылку, что бы по клику в любом месте mail_yes реагировала?
    Или имелось ввиду вот так http://jsfiddle.net/nduvse4y/2/
     
    Последнее редактирование: 18 июн 2015
  3. guru31337

    guru31337 Постоялец

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

    EuRo1985 Постоялец

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

    guru31337 Постоялец

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

    EuRo1985 Постоялец

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

    perfectartyshock Создатель

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

    guru31337 Постоялец

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

    perfectartyshock Создатель

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

    guru31337 Постоялец

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