Поместить иконку слева от абзаца - PullRequest
Новая
       10

Поместить иконку слева от абзаца

0 голосов
/ 04 января 2019

Мне нужно разместить абзац справа от иконки Пример JSFiddle : 

  <i class="material-icons">check_circle_outline</i>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec fermentum urna, at convallis turpis. Aliquam luctus mauris arcu, eu sodales mauris sagittis at.
  </p>

со следующим CSS: 

i {
  font-size: 36px!important;
  display: inline-block;
}

p {
  display: inline-block;
}

Они неПоявляются рядом ...

Чего мне не хватает?

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Попробуйте его

CSS 

.table{
 display: table;
width: 100%;
}
.tablecellleft{
 display: table-cell;
 width: 10px;
}
.tablecellright{
 display: table-cell;
 vertical-align: top;
}

HTML 

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

 <div class="table">
 <div class="tablecellleft">
<i class="material-icons icon">check_circle_outline</i>
 </div>
 <div class="tablecellright">
  ..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text
 </div>
</div>
0 голосов
/ 04 января 2019

Попробуйте это

i {
  font-size: 36px!important;
  position:relative;
  width:35px;
}

p {
  display: inline-block;
  width:85%;
}

div {
  width: 100%;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<div>
  <i class="material-icons">check_circle_outline</i>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec fermentum urna, at convallis turpis. Aliquam luctus mauris arcu, eu sodales mauris sagittis at.
  </p>
</div>
...