Я хочу поместить текст справа поверх изображения, но он всегда помещается справа НИЖЕ изображения, я оставляю код html
и хотел бы знать, можно ли это сделать в html
или в css
? потому что я ничего не могу добиться в css
.
<div>
<img src="http://lorempixel.com/300/200/"> (imagen en cuestion)
<p>Lista de Lubricantes</p> <!-- esto es lo que quiero que vaya a la derecha -->
</div>
Я вижу, что почти все рассказывают вам о факте его использования
float: left
и, однако, никто не объясняет вам, почему возникает этот эффект.На самом деле это происходит из-за того, что метки
p tags
имеют свойство по умолчанию,display: block
и это заставляет их действовать как блоки, а текст опускается чуть ниже изображения.Однако вы можете сделать так, чтобы элементы действовали как элементы
inline
(размещались на одной линии), но имели свойства блоков (они могут иметь высоту, ширину...). Это достигается за счет свойстваdisplay: inline-block
. Таким образом, текст будет размещен справа от изображения, поскольку он будет располагаться на той же строке, что и изображение.Наконец, чтобы поместить текст вверху, вы можете использовать свойство
vertical-align
, свойство, которое действует только на элементы,inline
но, поскольку мы указали, что наш текст действует так, какinline-block
тогда, это позволит нам использовать его. С помощью этого свойства мы можем определить, где элемент будет выровненinline
внутри строки, в которой он расположен. В этом случае, поскольку мы хотим, чтобы он был вверху, нам придется использовать расширениеtop
.Если вы хотите, чтобы текст отображался справа от изображения, все, что вам нужно сделать, это переместить изображение влево (с помощью
float:left
):Вы можете удалить,
<p>
а также определитьstyle="float:left;
на изображении.Этот код может вам помочь. Вы помещаете изображение и текст в общий контейнер, а затем играете с положением текста внутри этого контейнера с помощью абсолютных позиций.