Перенос div после span

155
02 марта 2022, 19:40

Подскажите как сделать так что бы div идущий после span в случае если в span много текста перемещался под span а не уезжал за пределы области. Спасибо.

<div class="JsConnect-Connect"> 
  <a class="ConnectLink" href="somelink"> 
    <img class="ProfilePhotoSmall UserPhoto" src="somelink"> 
    <span class="Username">imsuperlongnamebringer</span> 
    <div class="ConnectLabel TextColor">Войти через чтонибудь</div> 
  </a> 
</div>

Answer 1

div уезжает, т.к. это блочный элемент и занимает всю строку, чтобы изменить его поведение, его надо сделать строчным любым из этих способов.

  • установить для этого div css свойство display:inline-block
  • установить для этого div css свойство display:inline
  • использовать тег span вместо div.

.inlineDiv { 
  display: inline-block; 
} 
 
.inlineBlockDiv { 
  display: inline-block; 
}
<h3>inline</h3> 
<div class="JsConnect-Connect"> 
  <a class="ConnectLink" href="somelink"> 
    <img class="ProfilePhotoSmall UserPhoto" src="somelink"> 
    <span class="Username">imsuperlongnamebringer</span> 
    <div class="inlineDiv ConnectLabel TextColor">Войти через чтонибудь</div> 
  </a> 
</div> 
<h3>inline-block</h3> 
<div class="JsConnect-Connect"> 
  <a class="ConnectLink" href="somelink"> 
    <img class="ProfilePhotoSmall UserPhoto" src="somelink"> 
    <span class="Username">imsuperlongnamebringer</span> 
    <div class="inlineBlockDiv ConnectLabel TextColor">Войти через чтонибудь</div> 
  </a> 
</div> 
 
<h3>span</h3> 
<div class="JsConnect-Connect"> 
  <a class="ConnectLink" href="somelink"> 
    <img class="ProfilePhotoSmall UserPhoto" src="somelink"> 
    <span class="Username">imsuperlongnamebringer</span> 
    <span class="inlineSpan ConnectLabel TextColor">Войти через чтонибудь</span> 
  </a> 
</div>

READ ALSO
Flask, Jinja2 и не могу понять, как работает selected option
HTML

Flask, Jinja2 и не могу понять, как работает selected option

Имеется проблемаОформляю админ панель, страница делится на две части

 250
Как нормально вывести текст с тегами?
HTML

Как нормально вывести текст с тегами?

Есть текст по типу: <p>Explore a vast, beautiful, and immersive world<br /> Explore a vast, beautiful, immersive, and dangerous world filled with gripping enemy encounters, challenging puzzles and thrilling escape sequencesUnravel...

 105
Как xpath найти все элементы по классу и его подстроке?
HTML

Как xpath найти все элементы по классу и его подстроке?

Уважаемые пользователи stackoverflow, здравствуйтеНужен ваш совет

 161
Одинаковая реакция
HTML

Одинаковая реакция

Как сделать чтобы при наведению на картинку svg, тултип который срабатывает при наведение на кнопку срабатывал тоже?

 98