Иконка и напротив нее текст

seo-partner

Постоялец
Регистрация
12 Янв 2008
Сообщения
352
Реакции
179
Как сделать в css, иконка и напротив нее текст? пример на картинке.
 

Вложения

  • kak-sdelat.png
    kak-sdelat.png
    8,9 KB · Просмотры: 36
Мне привычнее при помощи background-position - Для просмотра ссылки Войди или Зарегистрируйся Ещё делают при помощи псевдоэлементов Для просмотра ссылки Войди или Зарегистрируйся Для просмотра ссылки Войди или Зарегистрируйся и свойства Для просмотра ссылки Войди или Зарегистрируйся. И вообще, кому как нравится, вариантов сделать это масса.
 
Здесь акцент на адптивную верстку
Вешаешь медиаквири на ширину сниппета, он сжимается пропорционально

Код:
.snippet {
      @include breakpoint(small) {
           width: 100%;
      }      
      @include breakpoint(medum up) {
           width: 400px;
      }
}

Или ставишь 100% и он меняется под контейнер
 
Как сделать в css, иконка и напротив нее текст? пример на картинке.
есть по крайней мере 3 простых варианта как это сделать:
1. Самый простой, это заключить в таблицу <table> с двумя колонками
2. Расположить 2 div в одну строку, при помощи float: left
3. Использовать :before
 
Здравствуйте, вот написал простенький код, берите если еще актуально Для просмотра ссылки Войди или Зарегистрируйся
 
Последнее редактирование:
можно сделать списком li и выровнить по левому краю оба, тогда первый будет стоять картина и далее текст.
 
Как сделать в css, иконка и напротив нее текст? пример на картинке.
Самый удобный - padding-left по ширине картинки и саму картинку фоном (будет внутри паддинга).
Если надо <img/> то display: inline-block к картинке и диву с текстом.
Или img float:left внутри дива с текстом если надо обтекание.
 
можно через CSS:
div:before {
content:" ";
postion:absolute;
width:200px;
height:200px;
top:0px;
left:-200px;
background:url(....) no-repeat left;
}
 
Назад
Сверху