выравнивание ячейки таблицы с изображением и текстом - PullRequest
Новая
       48

выравнивание ячейки таблицы с изображением и текстом

0 голосов
/ 22 ноября 2018 
<table style="width:100%">
 <tr>
  <th>type</th>
  <th>descritpion</th> 
 </tr>
<tr>
 <td><p><img src="mail.ping" style="width: 30px;"></p>
  <span>type-cedit ad=nd debit and shopping</td>
 <td>description</td>
  </tr>
</table>

enter image description here

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

На изображении выше мне нужно сделать так, чтобы «покупки» работали ниже «типа», если длина большая.Текст не должен появляться под изображением.Как я могу исправить эту проблему выравнивания

1 Ответ

0 голосов
/ 22 ноября 2018

Применяя display:inline-block или float:left, вы можете выровнять оба 

.divin{
display:inline-block;}
<table style="width:100%">
 <tr>
  <th>type</th>
  <th>descritpion</th> 
 </tr>
<tr>
 <td><p class="divin"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 30px;"></p>
 <span class="divin">type-cedit ad=nd debit and shopping</span></td>
 <td>description</td>
  </tr>
</table>
...