Тест при переносе строк “уходит” под картинку [div + css]

158
13 января 2019, 04:10

Не могу понять в чем дело.

Есть код:

<style type="text/css">
.relatimg { 
width:100px;
height:100px;
   }
.block{
 display:inline-block;
 vertical-align:middle;
}
  </style>
<div class="block"><a href="stoimost.htm"><img src="potol.jpg"
class="relatimg" alt="надпись" title="Натяжные потолки в ванной" align="middle"></a></div>
<div class="block"><p><a href="stoimost.htm" rel="bookmark" title="Надпись">
Надпись на которую нужно нажать</a></p> </div>

Выводит этот код примерно следующее:

Но, если текст в строке длинный, то он почему то уходит под картинку:

А мне соответственно нужно чтобы текст, вне зависимости от длины был справа по центру от картинки. Подскажите советом как поправить?

Answer 1

сделайте общий контейнер для 2 дивов и задайте ему стиль

"display: flex; flex-direction: row;"

остальные свойства (align-items, justify-content) подберите в зависимости от того, какой вид вам нужен.

READ ALSO
Flex и div overflow проблемы

Flex и div overflow проблемы

Почему у элемента exampleblock не появляется скроллбар? Если допустим ему задать ширину 100%, то не работаетЕсли например задать ширину для container__content,...

181
Как получить картинку с другого сайта? Js

Как получить картинку с другого сайта? Js

Есть url страницы сайта, как c данной страницы можно получить картинку с id "image"? Допустим, что url: wwwimages

183
Кнопки соц.сетей от Яндекс сбоку

Кнопки соц.сетей от Яндекс сбоку

Каким образом можно вывести кнопки сбоку в одну колонку, чтобы они плавали?

174
выделение памяти в javascript

выделение памяти в javascript

расскажите, как выделяется память в javascript в разных случаях

161