Как реализовать этот дизайн уведомления и дать ему разумный отзыв

Question

Я пытаюсь реализовать эту, достаточно простую конструкцию для блока уведомлений.

В том числе способности реагировать обертывание текстового блока на небольших экранах, аналогичных ниже;

Намерения здесь центрировать выравнивать уведомление родительской строки, и предпочтительно, когда видовой экран слишком мал, имеет обтекание текста и высоту горизонтального баннера, на котором сидит увеличение высоты соответственно , Это будет включено в проект начальной загрузки (может повлиять на float и т. Д.).

Here is a pen, показывая один из более простых подходов (и, вероятно, ближайший до сих пор), я пытался достичь этого.

*, 
 
html { 
 
    font-family: arial; 
 
    font-size: 20px; 
 
} 
 
.extra-row { 
 
    text-align: center; 
 
    padding: 1em; 
 
    border: 1px solid #eee; 
 
    background-color: #ccc; 
 
} 
 
.notification { 
 
    text-align: center; 
 
    color: #fff; 
 
    white-space: nowrap; 
 
} 
 
.notification-circle { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #3D7A1A; 
 
    -moz-border-radius: 75px; 
 
    -webkit-border-radius: 75px; 
 
    border-radius: 75px; 
 
    position: relative; 
 
    display: -webkit-flexbox; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: inline-flex; 
 
    -webkit-flex-align: center; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.notification-icon { 
 
    font-size: 5em; 
 
} 
 
.notification-block { 
 
    min-height: 150px; 
 
    line-height: 150px; 
 
    display: inline-block; 
 
    margin-left: -30px; 
 
    vertical-align: top 
 
} 
 
.notification-block span { 
 
    background-color: #54A127; 
 
    padding: 1em; 
 
    padding-left: 50px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row extra-row"> 
 
    <div class="col-lg-12"> 
 
     <p>This is a row above</p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-lg-12"> 
 
     <div class="notification"> 
 
     <div class="notification-circle"><span class="notification-icon">i</span> 
 
     </div> 
 
     <p class="notification-block"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row extra-row"> 
 
    <div class="col-lg-12"> 
 
     <p>This is a row below</p> 
 
    </div> 
 
    </div> 
 
</div>

Там довольно несколько предложений по вертикали центрирования текста таким образом, большинство, по всей видимости полагаться на линию высоту, которая является проблемой здесь с обертыванием текста.

Это может быть не лучший подход из-за использования линейной высоты, но проблемы здесь;

1. Предотвращение круглого контейнера и текстового контейнера от упаковка.
2. Обтекание текста в контейнере в то время как поддержание общей высоты/вертикально центрированного положения текстового блока.
3. Обложка текста с разумной высоты линии.

Добавление white-space: nowrap; в элемент .notification предотвращает # 1, но предотвращает обертку текста, который просто проходит мимо окна просмотра.

Может ли кто-нибудь пролить свет на лучший подход? Любые мысли были бы оценены.

Большое спасибо,

Baps.

Answer 1

Надеюсь, это приведет вас к правильному пути.

Я удалил много ненужного кода. Я также удалил префиксы для демонстрации.

Эта настройка может быть все, что вам нужно:

.notification { 
    display: flex;     /* 1 */ 
    align-items: center;   /* 2 */ 
    color:#fff; 
} 
.notification-circle { 
    flex: 0 0 150px;    /* 3 */ 
    height: 150px; 
    background-color: #3D7A1A; 
    border-radius: 75px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.notification-block { 
    margin-left: -50px;    /* 4 */ 
    background-color: #54A127;  /* 5 */ 
    padding: 1em;     /* 5 */ 
    padding-left: 75px;    /* 5 */ 
    z-index: -1;     /* 6 */ 
} 
.notification-block span { } 
.notification-icon { font-size: 5em; } 

Revised Codepen

Примечания:

1. Сделать обертка использование биоэтанола контейнер
2. Вертикально центр оба гибкие дети (.notification-circle и .notification-block)
3. Не растут. Не сжимайте. Оставайтесь фиксированными при ширине 150 пикселей.
4. Измененный от margin-left: -30px
5. переселены код из span ребенка
6. Обеспечение .notification-block не перекрывается .notification-circle